工作中有很多业务需求都是需要路由直接传递参数的,我们可以用缓存,也可以用vuex。但其实没有必要,vue路由有三种路由传参的基本方式,下面一起探索一下吧。
第一种方式
methods: {
toB(id) {
this.$router.push({
path: `/demo2/${id}`
})
}
}
需要对应路由配置如下
{
path: '/demo2/:id',
component: () => import(/* webpackChunkName: "demo2" */ '../components/demo/Demo2.vue'),
meta: { title: 'demo2' }
},
对应页面获取参数
mounted() {
console.log(this.$route.params) // {id: "1"}
}
这种传递方式刷新页面传递的参数数据不会丢失
第二种方式
通过路由属性中的name来确定匹配的路由,通过params来传递参数。
methods: {
toB(id) {
this.$router.push({
name: 'demo2',
params: {
id: id
}
})
}
},
对应路由配置
{
path: '/demo2',
name: 'demo2',
component: () => import(/* webpackChunkName: "demo2" */ '../components/demo/Demo2.vue'),
meta: { title: 'demo2' }
},
对应页面获取参数和第一种方式是一样的。
这种路由传参方式当页面刷新后,传递的参数数据会丢失
第三种方式
通过路由属性中的path来确定匹配的路由,通过query来传递参数。
methods: {
toB(id) {
this.$router.push({
path: '/demo2',
query: {
id: id
}
})
}
},
对应路由配置
{
path: '/demo2',
name: 'demo2',
component: () => import(/* webpackChunkName: "demo2" */ '../components/demo/Demo2.vue'),
meta: { title: 'demo2' }
},
对应页面获取路由参数
mounted() {
console.log(this.$route.query) // {id: "1"}
}
这种传递方式刷新页面传递的参数数据不会丢失