vue中路由跳转通常使用"this.$router.push(path)"或者<router-link>实现,下面主要说一下各方式如何在跳转的过程中传递参数。
router.js配置:
{ path: '/test', name: 'test', component: () => import('@/views/test') }
一、this.$router.push({ name: ‘name’, params: {…} })
注:使用params进行传值,只能使用name做跳转,不能使用path,否则会接收不到参数。(亲测)
跳转:
this.$router.push({
name: 'test',
params: {
test: '456'
}
})
test.vue中接收参数:
this.$route.params.test
二、this.$router.push({ path: ‘path’, query: {…} })
注:使用query传参,使用path或者name做跳转都能接收到参数
跳转:
this.$router.push({
name: 'test',
query: {
test: '000'
}
})
test.vue接收参数:
this.$route.query.test
三、<router-link>
路由跳转:
<router-link :to="{ path: '/test', query: { test: '111' }}">
<el-button type="primary">测试</el-button>
</router-link>
test.vue中接收:
this.$route.query.test
注:使用"name"做路由,"params"传参,使用"this.$route.params.test"也可以接收到参数。
四、在path路径中传参
router.js:
{ path: '/test/:id', name: 'test', component: () => import('@/views/test') }
跳转:
this.$router.push({
path: '/test/' + id
})
接收参数:
this.$route.params.id