正文
Vue:不同页面之间的传递参数--params
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在嵌套vue-router情况下，不同页面之间传递参数可以通过params实现。而params传参分为两种情况：
1.参数在url中显示
首先你要确定自己要传的参数，并在控制路由的文件中的Router中path内添加对应的字段如：
{
path:'/paramsUrl/:name/:age/:sex',
component:paramsUrl
}
我要传的参数是姓名，年龄以及性别。
在你要跳转的组件内定义参数，如：
stu:{name:'Tom',age:18,sex:'male'}
同时在HTML中引入它们，通过router-link跳转（也可以通过点击事件，push()跳转）,插入对应的字段。注意：如果参数个数不同，将不会出现预期效果！
<router-link :to="{path:'/paramsUrl/'+stu.name+'/'+stu.age+'/'+stu.sex}"><button>goto paramsUrl</button></router-link>
当然，你也可以通过this.$route.params.name来获取参数
2.通过name避免在url显示
通过上面的介绍，相信你也看出来相对应的弊端~不安全。如果用户篡改url中的参数，将会出现我们不想看到的问题。那么如何避免呢？---name
上边对Router中的操作只是改了 path,现在我们在添加一个name参数。
{
path: '/param',
name: 'param',
component: param
},
这里我们通过点击事件进行跳转~
<button @click="goParam">go to param</button>
在methods中编写方法
goParam:function(){
this.$router.push({name:'param',params:this.stu})
}
我还是比较喜欢第二种方法，不仅安全而且不用编写相对应的参数，想传什么直接在data中添加即可。
读取参数的方法同上~
