vue2 不同路由跳转同一页面（组件），界面不刷新

问题产出

项目开发中，两个路由共用的是一个vue page，相互切换，第二个页面不会刷新，即不触发组件响应的生命周期钩子。

问题解决

当前组件中监听 $route，处理逻辑

// 方式1、监听路由 $route 变化
export default{
    watch: {
        $route(to, from){
            // TODO
        },
    }
}

// 此方法失效的话，解决如下
<keep-alive> 
    <router-view></router-view> 
</keep-alive>

// 方式2、监听路由 $route 变化, 使用handler函数
export default{
    watch: {
        '$route': { // $route可以用引号，也可以不用引号
            handler(to, from){
                // TODO
            },
            deep: true, // 深度监听
            immediate: true, // 第一次初始化渲染就可以监听到
        }
    }
}

// 方式3、监听路由 $route 变化,触发methods里的方法
export default{
    watch: {
        '$route': 'init'
    },
    methods: {
        init(){
            // TODO
        }
    }
}

路由守卫

export default{
    data() {
        return {
            name: 'tom'
        };
    },
    beforeRouteEnter(to, from, next){
        // 不能获取this，用vm
        next((vm)=> {
            console.log(vm.tom)
        })
    },
    beforeRouteUpdate(to, from, next){
        //这个组件是被复用的时候调用，比如带有动态参数的路由跳转：/foo/11 跳转到 /foo/12
        console.log(this) // 可以访问this
        console.log('beforeRouteUpdate')
        next()
    },
    beforeRouteLeave(to, from, next){
        // 导航离开当前路由的时候被调用，this可以被访问到
        console.log(this) // 可以访问this
        console.log('beforeRouteLeave')
        next()
    },
}

简单粗暴，直接key

<template>
    <div id="app">
        <router-view :key="key"></router-view>
    </div>
</template>  

<script>
export default {
    computed: {
        key() {
            return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
        }
    }
}
</script>
    

随笔记录，不喜勿喷，有好的解决方法欢迎评论。