1. vue路由跳转传参
日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种:
1.1 配置动态路由
- 页面刷新,参数不会消失
- URl路径会显示传递的参数,参数公开
//1. 路由配置文件中 配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//2. 使用,跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//url形式: http://192.169.3.198/detail/1
//3. 跳转后页面获取参数
this.$route.params.id
1.2 通过query属性传值
- 使用 path 来匹配路由
- 页面刷新,参数不会消失
- query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1
//1. 路由配置文件
{
path: '/detail',
name: 'Detail',
component: Detail
}
//2. 跳转时页面
this.$router.push({
path: '/detail',
query: {
name: '张三',
id: 1,
}
})
//url形式: http://192.169.3.198/detail?id=1&name='张三'
//3. 跳转后页面获取参数对象
this.$route.query
1.3 通过params属性传值
- 通过路由属性中的 name 来确定匹配的路由
- 密文传参,参数不在url地址上显示
- 缺点:刷新页面后,参数就消失了
//1. 路由配置文件
{
path: '/detail',
name: 'Detail',
component: Detail
}
//2. 跳转时页面
this.$router.push({
name: 'Detail',
params: {
name: '张三',
id: 1,
}
})
//3. 跳转后页面获取参数对象
this.$route.params
1.4 总结
- 动态路由和query属性传值 页面刷新参数不会丢失, params会丢失
- 动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。