在多页面开发中我们总是要通过路由来映射不同的组件，这样势必就涉及到页面与页面之间的交互，比如传参，A页面=>B页面的拦截，当A跳转成功后B页面做相应的动作等等，许多操作。

Vue路由官网

1.组件内监听路由的方式：

watch:{
  '$route' (to,from) {
    console.log(to, from)
    if (to.query.id !== from.query.id) {
		this.id = this.$route.query.id
		this.name = this.$route.query.name
	}
  }
},

或者监听$route.path的变化：

watch: {
	'$route.path':function(newVal,oldVal){
       if(newVal === '/login'){
         this.$router.push('/login')
       } else if(newVal === '/register'){
         this.$router.push('/register')
         // this.$router.push({path: '/register', query: {userId: 123}})
         // this.$route.push({name: 'register', params: {userId: 123}})
       }
     }
}

// 监听新老路由变化信息
watch:{
    $route:{
      handler(newVal, oldval){
        console.log(newVal)
        console.log(oldval)
      },
      // 深度监听
      deep: true
    }
  }

(3)监听路由变化执行相应的方法：

methods:{
  getRoutePath () {
    console.log(`routePath is: , ${this.$route.path}`)
  }
},
watch:{
  '$route':'getRoutePath' // 当路由发生变化时，触发相应的操作
}

(4)全局监听路由变化

// 在App.vue的created()钩子函数中手动监听所有路由的变化
this.$router.beforeEach((to, from, next) => {
    console.log(to.name);
    next(); // 手动调用next方法
});

// 举个栗子：
watch: {
// (1) 监听路由是否发生变化
'$route' (to, from) {
	if(to.query.id !== from.query.id){
		this.id = to.query.id
		this.initData();//重新加载数据
	}
  }
}

// (2) 设置路径变化时的处理函数
watch: {
  '$route': {
	  handler: 'initData',
	  immediate: true
}
// 可以给router-view添加一个不同的key，这样vue在渲染时会知道这是完全不同的组件，
// 只要路由发生改变，就会重新创建这个组件。

<router-view :key="key"></router-view>
// 在计算属性中给它的后面追加时间戳，这样每次加载都会重新加载
computed: {
  key() {
    return this.$route.name !== undefined 
    ? `${this.$route.name} ${new Date().getTime()}`
    : `${this.$route.name} ${new Date().getTime()}`
  }
}

Vue监听路由变化的方式

VUE页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？

一、 通过 watch

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},
或者
// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},
或者
// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

方法二：：key是用来阻止“复用”的

Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)
使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。

<router-view :key="key"></router-view>
computed: {
  key() {
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  }
}

方法三：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

<script>
  export default {
    name: 'app',
    // 监听,当路由发生变化的时候执行
    beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当钩子执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
</script>

VUE页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？

监听路由从哪儿来到哪儿去

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

监听路由变化获取新老路由信息

watch:{
    $route:{
      handler(val,oldval){
        console.log(val);//新路由信息
        console.log(oldval);//老路由信息
      },
      // 深度观察监听
      deep: true
    }
  }

监听路由变化触发方法

methods:{
  getPath(){
    console.log(1111)
  }
},
watch:{
  '$route':'getPath'
}

全局监听路由

在app.vue的create或main.js进行路由判断，一般是在main.js中

this.$router.beforeEach((to, from, next) => {
    console.log(to);
    next();
});