Vue router如何传参
params、query是什么?
params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。
//192.168.1.95:8081/#/newList?id=activityNew111
<wv-cell title="查看更多" is-link @click="getList(sendNew.id)" class="unreadNum"></wv-cell>
1、 直接调用$router.push 实现携带参数的跳转,跳转不同页
getDetails(id) {
this.$router.push({
path: `/${id}`,
})
}
//192.168.1.95:8081/#/id
路由配置:
{
path: '/id', //meetingDetails
name: 'id', //meetingDetails
component: id //meetingDetails
}
子组件通过$route.params.id获取传递的值
2、 params传参(通过路由属性中的name来确定匹配的路由)
getList(id) {
this.$router.push({
name:'/newList',
params: { id: id}
})
}
3、 query传参 (使用path来匹配路由)
getList(id) {
this.$router.push({
path:'/newList',
query: { id: id}
})
}
将id传入newList,newList页面根据id不同传入不同数据
子组件通过$route.params.id获取传递的值
网友评论