Vue几种监听路由变化的方式

1.通过watch

        1.1.返回 “从哪里来” 和 “哪里去” 的路由信息

watch:{
	$route(to,from){
	  console.log(from.path) // 从哪来
	  console.log(to.path) // 到哪去
	}
}

        1.2. 返回 “新” “老” 路由信息

watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

2.通过钩子函数 beforeRouteEnter， beforeRouteUpdate， beforeRouteLeave

 // 监听,当路由发生变化的时候执行
    beforeRouteEnter (to, from, next) {
     // 需要注意这里不能使用this,
     // 因为我们使用的是进入路由之前，那会组件还没创建，
          next(()=>{
               // 所有我们只能使用过vm异步语句来让节点上树；
          })
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }