路由传参三种方式
需求:获取传递参数
<router-link to="/login/11314555">路由传参</router-link>
<button @click="loginById('11314555')">路由传参</button>
方式一
路由配置:
{
path: '/login/:id',
name: 'login',
component: login
}
需要在path中添加 /:id 来对应 $router.push 中path携带的参数
调用方法:
loginById(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: '/login/${id}',
})
参数获取:
this.$route.params.id
方式二
通过路由属性中的name来确定匹配的路由,通过params来传递参数,再次刷新页面后参数会丢失
{
path: '/login/:id',
name: 'login',
component: login
}
传参方法:
this.$router.push({
name: 'login',
params: {
id: id
}
})
参数获取:
this.$route.params.id
方式三
使用path来匹配路由,然后通过query来传递参数
this.$router.push({
path: '/login',
query: {
id: id
}
})
参数获取:
this.$route.query.id
这种方式传递中文会转码