vue中监听路由的变化其次,当路由改变，但是前后两个路由的使用同一组件,默认情况下当这两个页面切换时并不会触发vue的c

在vue中监听路由的变化，我们经常用到在watch增加$route的方法；

方法一：

$route(val) {
    console.log(val)
}

方法二：

$route: {
    handler: 'init', // init为自定义方法
    deep: true
}

或者

$route: {
    handler: (val) {
        this.init(val)
    },
    deep: true
}

路由变化时，需要注意2点：

当路由或者路由参数发生变化，都能发watch中的$route，但是当前后路由一样，仅仅使用setParam等方法直接更改query时，是监听不到$route的变化的，而是需要使用this.$router.push的方法，传入当前路由路径和新的query，才能触发对$route的watch；

其次,当路由改变，但是前后两个路由的使用同一组件,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，这里虽然可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。简单的做法的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了

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

使用computed属性和Date()可以保证每一次的key都是不同的。