vue路由的问号方式传参
vue路由的问号方式传参
·
之前在vue路由route的restful风格传参_一只小虾米~~的博客-CSDN博客中提到restful风格传参需要参数值和参数名一一对应,比较繁琐。而问号方式传参则解决了这个问题,因为它不需要在路径中配置参数名,具体操作如下:
1、准备:参考restful风格传参准备。
2、在路由标签的to属性的跳转路径后加上?参数名=参数值,这里为?id=999&name=jerry"
<router-link to="/home?id=999&name=jerry" class="home">主页</router-link>
3、在标签对应的组件中定义状态值,在created钩子函数中通过$route.query.参数名得到参数值并赋给状态值。
data(){
return {
id:'',
name:''
}
},
created() {
// 获取?方式传递的参数
this.id = this.$route.query.id;
this.name = this.$route.query.name;
}
4、在此组件模板中引用状态值看效果。
template:`<div class="contain">主页-{{id}}-{{name}}</div>`,
效果:
点击标签跳转后:
问号传参方式直接写参数名=参数值,无需配置,比restful风格简便,且获取方式跟restful风格差不多,restful风格是通过$route.params来获取.参数名,问号方式是通过$route.query.参数名来获取。总体来说,问号方式传参更好用。
更多推荐
已为社区贡献1条内容
所有评论(0)