Vue刷新页面有哪几种方式

在Vue项目中，刷新当前页除了 window.reload()，你还能想到什么办法？而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。

在某个详情页面的时候，我们经常需要通过路由中的详情 id 去获取内容，当我们在不同的详情页来回切换的时候，打开的页面是同一个，只是需要通过监听路由中的参数 id 的变化去重新请求详情接口。

如果这个详情页只需要一个接口还好，只需要通过 watch 去监听，里面做数据请求就好。

watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        if (to.name === 'Detail') {
          let id = to.params.id
           // ...
        }
      }
    }
  }

那一旦这个页面有很多的接口，数据逻辑依赖很复杂的时候，这个时候再写一推的监听就很容易出现屎山代码。而且不好维护。

此时我们最希望的是进入每个详情页都刷新页面，也就是重新加载一遍组件。怎么去维护好一个全局刷新页面的方法去更新路由组件？

我们可以通过在 App.vue 里定义一个 reload 方法，通过provide 和 inject 来抛出和注入到其它页面使用。

而最终的重担落在这个 reload 方法身上，其实也简单，这个方法主要的做的事是控制一个变量的值来控制整个页面的路由组件移除和显示。

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

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

然后在其它页面注入该方法直接调用即可

export default {
  inject: ['reload'],
  data() {
    return {
    }
  },

  methods: {
    refresh() {
      this.reload()
    }
  }

实际项目中经常有各种曲线救国的思路可以帮我们解决很多问题。遇到问题一定要发散下思维，这个时候搞懂原理，再结合各种特性才能想到解决办法。

实践告诉我们文档中的方法很正，但是并不能解决所有的问题。往往需要根据文档中的多个特性相结合找到思路。