vue怎么直接跳转到其他页面_vue的页面跳转方式和传值、取值
写业务中,从一个页面跳转到另一个页面,经常需要传值和取值,如何实现?1、通过router-link进行跳转,传递方式:使用query传递参数,路由必须使用path引入,使用params传递参数,路由必须使用name引入<router-link :to="{path: '/home', query: {key: 'hello', value: 'world'}}"> <butt.
·
写业务中,从一个页面跳转到另一个页面,经常需要传值和取值,如何实现?
1、通过router-link进行跳转,传递方式:
使用query传递参数,路由必须使用path引入,
使用params传递参数,路由必须使用name引入
<router-link :to="{path: '/home', query: {key: 'hello', value: 'world'}}">
<button>跳转</button>
</router-link>
跳转地址 ====> /home?key=hello&value=world
取值 ====> this.$route.query.key
<router-link :to="{name: '/home', params: {key: 'hello', value: 'world'}}">
<button>跳转</button>
</router-link>
跳转地址 ====> /home
取值 ====> this.$route.params.key
2、$router方式跳转
通过query
this.$router.push({
path: '/detail',
query: {
name: 'admin',
code: 10021
}
});
跳转地址 ====> /detail?name=admin&code=10021
取值 ====> this.$route.query.name
通过params
this.$router.push({
name: 'detail',
params: {
code: 10021
}
});
跳转地址 ====> /detail(注意:地址不会有参数,所以页面刷新传递的数据就没了)
取值 ====> this.$route.params.code
更多推荐
已为社区贡献1条内容
所有评论(0)