vue路由传参总结
程序员文章站
2022-05-18 16:55:21
...
一、动态路由传参
使用场景:
login/userId/1001
通过参数判断用户权限
使用步骤:
1、new VueRouter({
routes: [
{ path: '/user/:id/:age', component: User },
]
})
2、<router-link to="/user/1001/18">用户</router-link>
3、通过$route.params.id、$route.params.id获取传递的参数
二、路由组件传参
1、new VueRouter({
routes: [
{ path: '/user/:id/:age', component: User, props: true },
]
})
2、<router-link to="/user/1001/18">用户</router-link>
3、通过props接收
export default {
props:['id','age']
};
三、路由传参
1、new VueRouter({
routes: [
{ path: '/user', component: User },
]
})
2、<router-link to="/user?id=23&age=18">用户</router-link>
3、通过$route.query.id、$route.query.id获取传递的参数
或
1、new VueRouter({
routes: [
{ path: '/user', component: User },
]
})
2、<router-link :to="{path:'/user?',query:{id:23,age:18}}">用户</router-link>
3、通过$route.query.id、$route.query.id获取传递的参数
上一篇: Java MongoDB : Delete document(译)
下一篇: 免费好用的节假日API