版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_39457740/article/details/84781007
Vue监控路由的应用
问题来源:
我想要实现这样的一个功能,在同一个vue组件内,根据路由的不同分别呈现出首页banner或者是搜索功能
错误的解决办法
我最初希望单纯使用
data(){
return {
status:this.$route.query.status||0 //0表示在,1表示进行了初步的查询
}
},
当然了,这样只能在页面第一次刷新渲染时生成,随后当我们调用
methods:{
changeStatus(){
this.$router.push({path:"/",query:{status:1}})
}
}
的时候status
的值并没有发生变化
我们应当主动监听路由的变化(事实上最终我细化了组件的粒度,将这两个功能拆分了)
使用watch
watch: {
$route: {
// val是改变之后的路由,oldVal是改变之前的val
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
}
如此一来,不仅可以获取到路由的属性的值,还可以通过对比新旧url来作出响应操作,比如进行前端监控判断用户操作。