![1d292977afd1cb95bdae06dfb1c72c73.png](https://i-blog.csdnimg.cn/blog_migrate/bf88510dbef88bbd8876859e28e5d41b.jpeg)
写业务中,从一个页面跳转到另一个页面,经常需要传值和取值,如何实现?
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