vue路由传参及获取参数总结
方法一动态路由(这里用来测试,传了两个参数username和post_id)//路由配置{path: '/user/:username/:post_id',name: 'User',component: User}//跳转this.$router.push({path: `/user/${username}/${post_id}`,})匹配路径:/user/evan/123传递的参数:{ user
·
方法一
动态路由(这里用来测试,传了两个参数username和post_id)
//路由配置
{
path: '/user/:username/:post_id',
name: 'User',
component: User
}
//跳转
this.$router.push({
path: `/user/${username}/${post_id}`,
})
匹配路径:/user/evan/123
传递的参数:{ username: 'evan', post_id: '123' }
//获取参数
this.$route.params.username
this.$route.params.post_id
方法二
通过路由属性中的name来确定匹配的路由,通过params来传递参数。
//路由配置
{
path: '/user',
name: 'User',
component: User
}
//js跳转
this.$router.push({
name: 'User',
params: {
id: id
}
})
<!--html跳转-->
<router-link :to="{name:'User',params:{id:3}}"><span>跳转</span></router-link>
js获取参数:this.$route.params.id
html获取参数: {{$route.params.id}}
方法三
使用path来匹配路由,然后通过query来传递参数,参数显示在地址栏上,并用?号和&号拼接的
//路由配置
{
path: '/user',
name: 'User',
component: User
}
//js跳转
this.$router.push({
path: '/user',
query: {
id: id
}
})
<!--html跳转-->
<router-link to="/user?id=1"><span>跳转</span></router-link>
js获取参数:this.$route.query.id
html获取参数: {{$route.query.id}}
参数是对象的时候使用params传参
参数是字符串拼接的时候使用query传参
更多推荐
已为社区贡献6条内容
所有评论(0)