一、路由导航的几种定义方法
示例路由：
const routes = [
{
path: '/home',
name:"home",
component: () => import("../home/index.vue"),
}
1、声明式
<router-link to="/home">home</router-link>
2、编程式
$router.push('/home')
二、使用方式
在路由中有多个跳转方式
1、声明式
第一种、直接通过路由地址跳转
<router-link to="/home">home</router-link>
第二种、使用对象中带path的方式跳转
<router-link :to="{path:'/home'}">home</router-link>
第三种、通过对象中带name的方式跳转
<router-link :to="{name:'home'}">home</router-link>
2、编程式
第一种、字符串
router.push('/home')
第二种、使用对象中带path的方式跳转
router.push({path:"/home"})
第三种、通过对象中带name的方式跳转
router.push({name:"home"});
三、路由传参
路由传参后的链接有两种形式
一种是 url+斜杠+参数 (params方式)
另一种是 url+问号+参数 （query方式）
分声明式和编程式来讲吧
1、声明式传参
①、params方式(声明式)
params方式的话是浏览器地址栏会变成 url+斜杠+参数
如：http://localhost:8080/home/10
第一种
<router-link to="/home/10">home</router-link>
<router-link :to="{name: 'home', params: {id: 10 }}">home</router-link>
②、query方式（声明式）
2.1、第一种
直接路由带查询参数query，地址栏变成 /home?id=10
<router-link :to="{path: '/home', query: {id: 10 }}">home</router-link>
2.2、第二种
命名路由带查询参数query，地址栏变成/home?id=10
<router-link :to="{name: 'homename', query: {id: 10 }}">home</router-link>
2、编程式传参
2.1、第一种
$router.push("/home/10")
2.2、第二种
$router.push({name:"home",params:{id:10}})
3、无效传参
仅限于只有path和params同时存在的情况，这样的话，不管是声明式还是编程式，params会被忽略
直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'homename', params:{ id: 10 }})
直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: '/home', params: { id: 10 }}">home</router-link>
但是如果path和name和params都存在的话，params还是可以正常传递过去的。
四、路由传递后的参数获取
params的获取方式
$route.params.xxx
query的获取方式
$route.query.xxx
五、回到上一层级
this.$router.back()
this.$router.go(-1)
六、需要注意的点
1、使用params的话，需要配置路由，如咱们传递个id过去，那么路由就应该写成
/路由名/:id
2、当默认跳转路由地址中子路由和其他路由地址重复，优先选择子路由
转载自：https://blog.csdn.net/weixin_41654160/article/details/120299567
