Vue 在缓存组件中 watch 路由，其他页面同时调用问题

问题描述

       对于一个带有动态参数的路径 /user/:id，/content/:id，在 /user/1 和 /content/2 之间跳转的时候，使用watch 监听路由变化，在两个路由发生切换时，会调用当前所有缓存组件中的watch，会导致其他页面监听路由的数据也与后台发生请求，产生叠加请求。

解决方法

提供一个全局的mixin（减少代码量），设置一个flag，判断是否需要进行请求，在组件钩子函数中，激活时，设置 flag 为true，失活时为false。代码如下：

export default {
    data(){
        return {
            watchFlag: false
        }
    },
    watch: {
        "$route": {
            handler(to,from){
                // 添加 $nextTick 确保请求 在 activated 之后
                this.$nextTick(()=>{
                    this.watchFlag && this.init && this.init();
                })
            }
        },
        deep: true
    },
    activated(){
        this.watchFlag = true;
    },
    deactivated(){
        this.watchFlag = false;
    }
}