當vue單頁面需要替換參數(shù)并刷新頁面時，這個時候使用this.$router.push或this.$router.replace會發(fā)現(xiàn)路由改變了，但是頁面上的數(shù)據(jù)并沒有實時刷新。在網(wǎng)上找到了以下幾種方法，親測可用：

this.$router.go(0)

在具體頁面中，先通過this.$router.push或this.$router.replace替換路由，隨后調(diào)用this.$router.go(0)，頁面就會強制刷新，但是該強制刷新與F5刷新效果類似，頁面會有空白時間，體驗感不好；

provide/inject

首先在app.vue頁面中增加如下配置：

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

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

然后在具體頁面中加上inject配置，具體如下：

 export default {
    name: 'orderAndRandom',
    
    // 就是下面這行
    inject: ['reload'],
    data() {},
    
    // 省略
 }

加上配置后，在調(diào)用this.$router.push或this.$router.replace替換路由后，再新增this.reload()就可以實現(xiàn)頁面內(nèi)數(shù)據(jù)刷新。