在项目开发中，经常需要用到编程式路由传参，但一时难以想起，归根结底还是自己用少了，简单记录下Vue路由传参自带的三种方式，方便今后查漏补缺，参考文档
前置知识
this.$router路由对象, 用于路由跳转this.$route路由参数对象, 用于获取传递过来的参数
动态路由传参
基本用法：
- 需要提前配置路由规则:
/路径/:参数名 - 传递路径上使用
/参数值 - 目标组件中使用
this.$route.params接收 - 参数会在浏览器地址栏中显示，刷新页面参数不会丢失
// 1.在路由配置文件中配置动态路由
const routes = [
{
path: '/user/:name',
name: 'user',
component: User
}
]
// 2. 在组件中使用 this.$router.push(/路径/参数值) 方法跳转
this.$router.push('/user/admin')
// 3. 在跳转后的目标组件中使用 this.$route.params 获取对应组件传递过来的参数
this.$route.params.name // admin
query 方式传参
基本用法：
path+query组合- 目标组件中使用
this.$route.query接收 - 使用
query方式传参，参数会以查询字符串的形式显示在浏览器的地址栏中 - 刷新页面，参数不会丢失
// 1. 在组件中使用 this.$router.push(/路径/参数名=参数值) 方法跳转
this.$router.push(
{
path: '/user',
query: {
name: 'admin'
}
}
)
// 浏览器地址栏：http://localhost:4399/user?name=admin
// 2. 在跳转后的目标组件中使用 this.$route.query 获取对应组件传递过来的参数
this.$route.query.name // admin
params 方式传参
基本用法：
name+parmas- 目标组件中使用
this.$route.parmas接收 - 密文传参，传递的参数不会在浏览器的地址上显示
- 页面刷新后，参数会丢失
// 1. 在组件中使用 this.$router.push(/路径/参数名=参数值) 方法跳转
this.$router.push(
{
name: 'user',
params: {
name: 'admin'
}
}
)
// 2. 在跳转后的目标组件中使用 this.$route.params 获取对应组件传递过来的参数
this.$route.parmas // admin
