Vue.js路由router-link传参以及参数获取
query
路径:http://localhost:8081/#/test?name=1
<router-link :to="{path:'/test', query: {name: id}}">跳转</router-link>
获取(id是参数):this.$route.query.id
params
路径:http://localhost:8081/#/test/1
<router-link :to="'/test/'+id">跳转</router-link>
获取(id是参数):this.$route.params.id
this.$route是一个数组,里面包含路由的所有信息
对应的RESTful路由配置:
{
path: '/test/:id',
name: 'test',
meta: {
title: '测试',
},
component: resolve => require(['../components/test.vue'], resolve)
}
注意:router-link中链接如果是‘/’开始就是从根路由开始,如果开始不带‘/’,则从当前路由开始
版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/12/vue-js-routing-router-link-parameter-transmission-and-parameter-acquisition/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
打赏
海报
Vue.js路由router-link传参以及参数获取
query
路径:http://localhost:8081/#/test?name=1
<router-link :to="{path:'/test', query: {name: id}}">跳转</router-link&……
文章目录
关闭
共有 0 条评论