什么是路由参数？
Vue Router提供了两种参数传递的模式，params模式 与 query模式。
params模式
路径参数用 冒号: 表示，当一个路由被匹配成功，它的params值将被保存到路由地址的params属性中，在接收的时候，通过 router.params 就可以拿到传递的参数。
// 定义如下两个路由Test和Test1，并给Test路由配置参数
// router/index.js
const routes = [{
path: '/test/:id,
name: 'Test',
component: () => import('@/views/test/Test.vue')
}, {
path: '/test1,
name: 'Test1',
component: () => import('@/views/test/Test1.vue')
}]
// 如果Test1路由，想要跳转到Test路由，并且传递参数，如下操作
// views/test/Test1.vue
router.push({
name: 'Test',
params: {
id: 1
}
})
// 在Test路由对应的Test组件中，使用如下方式获取到传递的参数
// views/test/Test.vue
const id = router.params.id // 1
query模式
路径参数是以 问号？开头，以 &符号 分割的 序列化字符串，例如：/test2?name=12&id=3
当对应的路由被匹配，它的query值将被保存到对应路由地址的query属性中，通过 router.query 即可拿到对应的参数。
// 定义如下两个路由Test2和Test3
// router/index.js
const routes = [{
path: '/test2',
name: 'Test2',
component: () => import('@/views/test/Tes2.vue')
}, {
path: '/test3,
name: 'Test3',
component: () => import('@/views/test/Test3.vue')
}]
// 如果Test3路由，想要跳转到Test2路由，并且传递参数，如下操作
// views/test/Test3.vue
router.push({
name: 'Test2',
query: {
name: 12,
id: 3
}
})
// 在Test2路由对应的Test2组件中，使用如下方式获取到传递的参数
// views/test/Test2.vue
const id = router.query.id // 3
const name = router.query.name //12
路由之间的参数传递与接收
在路由导航的时候，我们只能通过 router.push 传递参数，其他的方式均无法传递参数。
router.push 的参数可以有 四种形式，并且前三种形式是等价的。
// 1.路径字符串形式的路由地址
router.push('/test2?name=12&id=3')
// 2. path + query 方式的路由地址，
// 注意，此方式下，path不能传递params模式的参数
router.push({
path: '/test2',
query: {
name: 12,
id: 3
}
})
// 3. name + query 方式的路由地址
router.push({
name: 'Test2',
query: {
name: 12,
id: 3
}
})
// 4. name + params 方式的路由地址
// 注意，此方式下，需要在路由记录中配置动态参数占位符，例如：path: '/test2/:name/:id'
router.push({
name: 'Test2',
params: {
name: 12,
id: 3
}
})
路由向组件的参数传递与接收
路由向组件传递参数的方式和路由之间的传递参数方式是一致的，只是在接收参数的时候有所区别。
组件对外暴露属性的方式是通过props方式进行的，所以，路由向组件传参，即是路由向props传递参数。
我们只需要在routes中配置props相关参数即可实现路由向组件传参，官方文档提供了如下四种配置方式。
布尔模式
当路由记录的props属性被设置为true时，路由地址中的router.params将被转为组件的props中的属性。
// router/index.js
// 当props被设置为true时，router.params将被转为组件的props中的属性
const routes = [{
path: '/test2/:name/:id',
name: 'Test2',
component: () => import('@/views/test/Tes2.vue'),
props: true
}]
// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
name: [String, Number],
id: Nuber
})
命名视图
对于有命名视图的路由，必须给每一个命名视图路由定义props配置。
// router/index.js
// 需要注意的是，在多个命名视图中，
// 我们必须将命名视图对应的参数一一定义在路由对应的path中
// 例如 /test2/:name/:id/:title
const routes = [{
path: '/test2/:name/:id/:title',
name: 'Test2',
components: {
default: () => import('@/views/test/Tes2.vue'),
SideBar: () => import('@/views/test/SideBar.vue')
},
props: {
default: true,
SideBar: true
}
}]
// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
name: [String, Number],
id: Nuber
})
// 在SideBar.vue中的props可定义如下
// views/test/SideBar.vue
const props = defineProps({
title: String
})
对象模式
如果路由记录中的props是一个对象，会直接将该对象设置为组件的props。
// router/index.js
// 注意，此模式下，不需要用过router.push传参
const routes = [{
path: '/test2',
name: 'Test2',
component: () => import('@/views/test/Tes2.vue'),
props: {name: 12, id: 3}
}]
// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
name: [String, Number],
id: Nuber
})
函数模式
路由记录中的props的值也可以是一个函数，它将返回一个props跟组件的props对应，可以看做是对象模式的进阶版。
// router/index.js
// 注意，此模式下，即可以处理router.push传递的参数，也可以不传值，使用静态数据
const routes = [{
path: '/test2/:name/:id',
name: 'Test2',
component: () => import('@/views/test/Tes2.vue'),
props: route => ({...route.params, title: 'this is title'})
}]
// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
name: [String, Number],
id: Nuber,
title: String
})
总结
在使用router.push导航时，建议使用name + query 或者 name + params的方式传递参数，增加项目的可维护性。