1、vue-router传递参数分为两大类:
- 声明式的导航 < router-link>
- 编程式的导航 router.push
1、声明式的导航
(1)、路由跳转
字符串
<router-link to="/detail">详情</router-link>
此方式实现路由跳转,不携带参数
(2)、传参
对象
传递参数主要是以对象的形式,有命名路由和查询参数两种方式。
对应路由配置如下:
{
path: '/detail',
name: 'Detail',
component: () => import('./Detail.vue')
}
一、命名路由
<router-link :to="{ name: 'Detail', params: { id: 1111}}">click to detail page</router-link>
此方法页面刷新路由传递参数会消失。
二、查询参数
<router-link :to="{ path: '/detail', query: { id: 1111}}">click to detail page</router-link>
此方法页面刷新路由传递参数不会消失,传递参数会跟在路由地址后面。
2、编程式的导航
(1)、路由跳转
字符串
this.$router.push("detail");
字符串方式是直接将路由地址以字符串的方式来跳转,这种方式不能传递参数。
(2)、传参
对象
传递参数主要是以对象的形式,有命名路由和查询参数两种方式。
一、命名路由
命名路由传递参数使用params来传递。
实例:
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'Detail',
params: {
id: id
}
})
对应路由配置: 这里可以添加:/id 也可以不添加,添加/:id数据会在url后面显示,不添加数据就不会显示。
{
path: '/detail',
// 一定要写name,params必须用name来识别路径
name: 'Detail',
component: () => import('./Detail.vue')
}
子组件中: 这样来获取参数
this.$route.params.id
用params传参,F5强制刷新页面参数数据会被清空。
二、查询参数
查询参数是在路由地址后面带上参数,传递参数使用query,路由地址使用path来传递,目标页面接收传递的参数使用query。
实例:
父组件:使用 path 来匹配路由,然后子组件通过query来传递参数
这种情况下 query 传递的参数会显示在 url 问号后面即 ?id=…
例如:https://xxx.com.cn/#/detail?id=73080
this.$router.push({
path: '/detail',
query: {
id: id
}
})
对应路由配置:
{
path: '/detail',
name: 'Detail',
component: () => import('./Detail.vue')
}
对应子组件获取参数:
// 获取参数
this.$route.query.id
使用这种方式实现,刷新页面传递的参数不会消失。
也可以是以下这种,直接调用$router.push 实现携带参数的跳转:
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/detail/${id}`,
})
对应路由配置如下:
{
path: '/detail/:id',
name: 'Detail',
component: () => import('./Detail.vue')
}
这种方式,需要在path中添加/:id来对应 $router.push 中path携带的参数。
在子组件中可以使用来获取传递的参数值。
this.$route.params.id
此方法页面刷新数据不会丢失。
3、总结
总的来说,万变不离其宗,vue-router 路由传参归为以下三大类:
一、用< router-link>标签来传递参数
二、用$router.push实现路由传参,通过query来传递参数
三、通过路由属性中的name匹配路由,再根据params传递参数
注意: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的,所以F5强制刷新也不会被清空。(为了避坑,传参强烈建议使用string类型)