拓展

router-link

router-link：实现路由跳转，相当于对a标签<a href=""/>的封装，是写在<template></template>标签里。

<router-link to="/aaa">用户注册</router-link>

to：表示目标路由，通过传递“to”来指定链接。当点击‘用户注册’，内部会立刻把 to 的值传给 router.push()，从而跳转页面。

router.push

&router-push：实现路由跳转，是写在<script></script>标签里。

//带查询参数，变成 /user?id=12&name=tom&age=13&gender=male
router.push({ 
     path: 'user', 
     query: { 
              id: '12',
              'name':'tom',
              'age':'13',
              'gender':'male'
            }
})

//命名的路由  变成/user/12/tom/13/male
router.push({ 
     name: 'user', 
     params: { 
              id: '12',
              'name':'tom',
              'age':'13',
              'gender':'male'
            }
})

<!-- /views/expert/Qalist/index.vue-->
<template>
<el-button
      type="primary"
      size="small"
      @click="$router.push(`/user?id=12&name=tom&age=13&gender=male`)" //query
>
 查看
</el-button>
<el-button
      type="primary"
      @click="$router.push(`/user/12/tom/13/male`)"   //param
>
 修改
</el-button>
</template>

<!-- /views/expert/Qalist/QaLog.vue-->
<script>
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
const { query: { row } } = useRoute();  //2.二次解构，在跳转页面定义router变量
const { params: { id } } = useRoute();
</script>

(59条消息) vue3.0 router路由跳转传参（router.push）_吃鱼吐泡泡的博客-CSDN博客_router.push vue3