Vue监控路由变化以及应用

版权声明：本文为博主原创文章，未经博主允许不得转载。 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来作出响应操作，比如进行前端监控判断用户操作。