因为最近项目有这样一个需求:在首页导航栏显示消息数,点击每一条未读消息带着参数跳转到相应页面进行显示,网上查了好些办法,比如a组件跳转到b组件:
对于a组件有几种方式:
1.纯页面跳转
<template>
<div>
<router-link
:to="{
path: '你要跳转的路由',
params: {
name: 'name', // params为传送的参数,name为router.js里为页面配置的name
data: data
},
query: {
name: 'name', //query和params也是传送的参数,区别在于query会在路径上显示参数
data: data
}
}">
</router-link>
</div>
</template>
2.通过js控制:
<template>
<div>
<button @click="lookDetail()">跳转</button>
</div>
</template>
<script>
export default {
data() {
},
methods: {
lookDetail() {
this.$router.push({
path: '',
name: name, // 要跳转的路径的 name,可在 router 文件夹下的 index.js 文件内找
params: params
})
}
}
}
</script>
对于b组件的监听:这里是我遇到坑的地方,本来监听代码是这样:
watch: {
'$route': 'getParams' // 监测路由变化,只要变化了就调用getParams
},
methods: {
getParams() {
const params = this.$route.params.dataobj // 取到路由带过来的参数
}
但是发现第一次跳转时并没有监听到路由变化,而且多次切换路由参数是累加的(使显示不对),所以查了好多方法,最后在b组件中使用beforeRouteEnter
方法实现了a页面跳转带参显示在组件b中,需要注意的是此方法与watch,methods同级,且页面还未加载所以不能用this,具体用法可以百度下。
与这个方法相关的方法也可以百度了解下,非常实用:
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
对于b组件:
watch(){
},
beforeRouteEnter(to, from, next) {
next(vm => { // 通过 `vm` 访问组件实例
console.log(vm.$route.params)
})
},
methods:{
//your code
}