刷新路由有幾種方式，都有各自的優(yōu)缺點(diǎn)
之前一直都是使用location.reload（）來(lái)刷新頁(yè)面，但在最近寫(xiě)代碼中通過(guò)查看大家對(duì)此的解決方法，找到了一個(gè)比較實(shí)用的方法，vue的provide與inject結(jié)合使用，這個(gè)方法解決了我在項(xiàng)目中遇到的問(wèn)題，那個(gè)時(shí)刻確實(shí)興奮。哈哈哈

使用場(chǎng)景：
一個(gè)下拉框控制整個(gè)系統(tǒng)，如一個(gè)數(shù)據(jù)中心的下拉框，切換數(shù)據(jù)中心，所有的api都要重新獲取，頁(yè)面數(shù)據(jù)都隨之變化，總之最根本要解決的問(wèn)題就是切換數(shù)據(jù)中心后，刷新頁(yè)面重新請(qǐng)求api。我使用的provide + inject方法。

與其他方法的區(qū)別：刷新時(shí)不會(huì)出現(xiàn)瞬間空白的頁(yè)面，很實(shí)用。

注冊(cè)、使用
注冊(cè)：provide注冊(cè)
使用：在操作刷新的頁(yè)面注入，用inject注入inject: ['reload'],

1、第一種方法：provide 與 inject結(jié)合使用（親測(cè)有效的比較實(shí)用的方法）

1、1 注冊(cè)

/**
App.vue
*/
<template>
  <div id="app">
    <router-view v-if="isRouterAlice"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlice: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlice = false
      this.$nextTick(function() {
        this.isRouterAlice = true
      })
    }
  }
}
</script>

1、2 使用

/**
刷新頁(yè)面操作的頁(yè)面，如我案例中切換數(shù)據(jù)中心的頁(yè)面
*/
<template>
  <el-scrollbar wrap-class="scrollbar-wrapper">
    <!-- 集群 -->
    <el-select
      v-if="!isCollapse"
      v-model="currentCluster.value"
      class="data-center-selector"
      @change="switchCluster(currentCluster.value)">
      <el-option
        v-for="(item, index) in clusterList"
        :key="index"
        :label="item.lable"
        :value="item.value"
      />
    </el-select>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  components: { SidebarItem },
  inject: ['reload'],
  data() {
    return {
      clusterList: [
          {
              label:qingdao,
              value: '青島數(shù)據(jù)中心'
          },
          {
              label: shanghai,
               value: '上海數(shù)據(jù)中心'
          }
      ],
      currentCluster: {
        value: ''
      }
    }
  },
  methods: {
    ...mapActions([
      'SwitchCluster' // 設(shè)置localstorage 和當(dāng)前集群
    ]),
    // 切換集群，設(shè)置當(dāng)前store的當(dāng)前集群
    switchCluster(clusterValue) {
      // 通過(guò)當(dāng)前的集群獲取集群對(duì)應(yīng)的label的object用于api
      const current_cluster = this.clusterList.find(item => item.value === clusterValue)
      // 設(shè)置localstorage 和當(dāng)前集群后重新刷新頁(yè)面請(qǐng)求api
      this.SwitchCluster(current_cluster).then(res => { 
          this.reload()   
      }).catch(err => {
        console.log(err)
      })
    },

/**
store的app.js  主要用于設(shè)置localstorage的數(shù)據(jù)中心id和當(dāng)前的數(shù)據(jù)中心
*/
import { setCluster, getCluster, getClusterList } from '@/utils/cluster'

const app = {
  state: {
    clusterId: getCluster(),
    currentcluster: '',
  },
  mutations: {
    // 當(dāng)前集群
    SET_CURRENT_CLUSTERS: (state, data) => {
      state.currentcluster = data
    },
    // 當(dāng)前集群的id
    SET_CLUSTER_ID: (state, data) => {
      state.clusterId = data
    }
  },
  actions: {
    // 切換集群 params: object currentCluster
    SwitchCluster: ({ commit }, currentCluster) => {
      commit('SET_CLUSTER_ID', currentCluster.label)
      setCluster(currentCluster.label)
      commit('SET_CURRENT_CLUSTERS', currentCluster.value)
    }
  }
}

export default app

2、第二種方法 window.location.reload()

強(qiáng)制熟悉頁(yè)面、相當(dāng)于f5，整個(gè)頁(yè)面重新加載，會(huì)出現(xiàn)一個(gè)瞬間的空白頁(yè)面，體驗(yàn)不佳

3、第三種方法 this.$router.go(0）

當(dāng)前頁(yè)面跳轉(zhuǎn)到當(dāng)前頁(yè)面，相當(dāng)于刷新當(dāng)前頁(yè)面，也會(huì)出現(xiàn)一個(gè)空白頁(yè)面，體驗(yàn)不佳。
this.$router.go(n）：表示頁(yè)面向前或向后跳轉(zhuǎn)多少個(gè)頁(yè)面，0表示跳轉(zhuǎn)到當(dāng)前頁(yè)面。

4、 第四種方法 this.$router.replace

不會(huì)出現(xiàn)空白頁(yè)面。只有地址欄有個(gè)快速的切換過(guò)程，但是在瀏覽器的后退不能進(jìn)行后退了。