vue 导航菜单重新加载刷新页面

知识库项目点击导航菜单栏上点击子菜单刷新页面的需求

应用
vue在当前页面内路由参数发生变化，怎么进行页面刷新。

传统方式
window.location.reload(); 整个页面进行刷新，会出现白屏，体验不好
this.$router.go(0); 同上，体验不友好

推荐方法
使用provide / inject组合方式
原理：允许一个祖先组件向其子孙后代注入一个依赖，不论组件层次有多深，在起上下游关系成立的时间内始终生效。

provide: 一个对象或者返回一个对象函数
inject: 一个字符串数组，或者一个对象，对象的key是本地的绑定名

 

修改路由分发的部分

// 在app.vue或者具体项目中路由分发的地方引入v-if="isRouterAlive"

在侧边菜单栏的代码部分添加下面的代码

// 注意该部分的handleselect方法



export default {
    inject: ['reload'],  // 注入重载的功能（注入依赖）
    //监视
    watch: {
       //检测路由参数发生改变时，刷新当前页面 调用
       '$route': function(){
            // this.reload();
        }
    },
    methods: {
        handleselect: function (a, b) {
            this.reload()  // 点击侧边栏重新载入页面
        },
    }
}