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()  // 點擊側邊欄重新載入頁面
        },
    }
}