Vue:不同页面之间的传递参数--params
1.参数在url中显示首先你要确定自己要传的参数,并在控制路由的文件中的Router中path内添加对应的字段如:{ path: '/details/:id', name: 'details', component: details}我要传的参数是活动id。在你要跳转的组件内定义参数,如:var info = {id:"123",mes...
·
1.参数在url中显示
首先你要确定自己要传的参数,并在控制路由的文件中的Router中path内添加对应的字段如:
{ path: '/details/:id', name: 'details', component: details }
我要传的参数是活动id。
在你要跳转的组件内定义参数,如:
var info = {id:"123",message:"成功"}
同时在HTML中引入它们,通过router-link跳转(也可以通过点击事件,push()跳转),插入对应的字段。注意:如果参数个数不同,将不会出现预期效果!
<router-link :to="{path:'/details/'+stu.id}"><button>goto paramsUrl</button></router-link>
当然,你也可以通过this.$route.params.name来获取参数
2.通过name避免在url显示
通过上面的介绍,相信你也看出来相对应的弊端~不安全。如果用户篡改url中的参数,将会出现我们不想看到的问题。那么如何避免呢?---name
上边对Router中的操作只是改了 path,现在我们在添加一个name参数。
{ path: '/details', name: 'details', component: details }
这里我们通过点击事件进行跳转~
<button @click="goParam">go to param</button>
在methods中编写方法
goParam:function(){ this.$router.push({name:'details',params:info}) }
更多推荐
已为社区贡献2条内容
所有评论(0)