Vue 监听路由变化，然后重载当前页面

Vue 监听路由变化，然后重载当前页面

有时候，我们需要通过监听路由中参数的变化来重载当前页面内容，重新执行当前页面的 mounted() 这个生命周期，
但如果 location.reload() 是重载了整个项目，那么如何重载当前页面这个vue文件呢

一、App.vue

App.vue 中添加如下内容

export default {
    data() {
        return {
            isRouterActiveAlive: true
        }
    },
    mounted() {
    },
    provide(){
        return {
            reload : this.reload
        }
    },
    methods: {
        reload(){
            this.isRouterActiveAlive = false
            this.$nextTick(()=>{
                this.isRouterActiveAlive = true
            })
        }
    }
}

二、在需要重载的组件中如下使用

   inject: ['reload'],
   watch: {
       '$route.query.index'(){
           this.reload()
       }
   }

三、结果

当路由从

door?index=0&dateName=normal

变到如下情况时，就会重载当前页面

door?index=1&dateName=normal

这样在路由变化的时候，就会更新当前页面了