vue路由监听,做到刷新时也可以监听

跳转监听 

方法一

 

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},

方法二

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);  //跳转前的路由
      console.log(oldVal);  //跳转后的路由
    },
    // 深度观察监听
    deep: true
  }
},

方法三

// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

刷新时也可以监听 

只需加  immediate:true,

// 监听,当路由发生变化的时候执行
  watch: {
    $route:{
      immediate:true, //加这个就可以在刷新时也监听到相应页面的路由

      handler(val){
          console.log(val)
      },
      // 深度观察监听
      deep: true
    }
  },