上次被问到路由之间如何传值,我一整个蒙住,但其实在项目中也有用到过,所以今天把这些方法整理出来,以后便于翻阅
1. query 传值
在主页面中写一个按钮,绑定方法
<button @click="sentMesg()">兄弟页面</button>
通过 path 来连接和组件页面 brother 之间的关系
sentMesg(){
this.$router.push({
path:'/brother',
query: {
id: 2,
name: 'hjc'
}
})
}
routes: [
{
path: `/brother`,
name: 'brother',
component:brother
}
]
在组件页面 brother 中可以打印出来获取到的值
created(){
console.log(this.$route.query.id)
console.log(this.$route.query.name)
}
同时获取的值会在地址栏中显示出来,并且刷新页面,打印的值不会消失
2. params 传值
将按钮中定义的方法改写,在这里通过 name 来和组件页面 brother 之间联系
sentMesg(){
this.$router.push({
name:'brother',
params: {
id: 2,
name: 'hjc'
}
})
}
routes: [
{
path: `/brother`,
name: 'brother',
component:brother
}
]
注意在这里打印的时候,获取数据的方式为params
created(){
console.log(this.$route.params.id)
console.log(this.$route.params.name)
}
这种方法获取传值不会在地址栏中显示,但刷新页面打印的数据会消失
3. 动态路由拼接传值
这种方法操作起来就要简单一些,没有多余的参数对象
sentMesg(){
this.$router.push({
path:'brother/6/hjc'
})
}
通过冒号拼接来获取动态路由的数据
routes: [
{
path: `/brother/:id/:name`,
name: 'brother',
component:brother
}
]
created(){
console.log(this.$route.params.id)
console.log(this.$route.params.name)
}
这种方法刷新页面数据不会消失,并且传递的数据也是可以在地址栏看到的