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

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

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

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

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

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

 

修改路由分发的部分

// 在app.vue或者具体项目中路由分发的地方引入v-if="isRouterAlive"
<template>
    <div id="app">
        <transition name="fade" mode="out-in">
            <router-view v-if="isRouterAlive"></router-view>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'app',
    // 点击页面侧边栏重载功能的实现（该处提供了提供给后代组件的数据/方法）
    provide() {
        return{
            reload: this.reload
        }
    },
    data() {
        return{
            isRouterAlive: true
        }
    },
    methods: {
        //页面重新载入函数
        reload () {
            this.isRouterAlive = false;
          this.$nextTick(function () {
              this.isRouterAlive = true
          })
          }
    },
}

</script>

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

// 注意该部分的handleselect方法
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" 
    @select="handleselect" unique-opened router v-show="!collapsed" >

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