Vue 刷新当前页面

1). location方式

location.reload()

2). router方式

this.$router.go(0)

 这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入。

3). provide/inject方式

通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来：

App.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </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>

页面的引入：

export default {
  inject: ['reload']，//注入

    letComplete(e) {
      const params = {
        order_id: e.id,
        order_status: 'complete'
      }
      modify(params).then(response => {
        console.log(response.data)
      })
      this.reload() //调用注入的组件
    }
  }
}

 这也即可达到刷新的效果，但当点击按钮时所有页面重新渲染

4.对列表操作后的表格刷新的操作方法：

 当我们在操作数据表格时，会对表格进行增删改查，做完操作我们需要对列表进行刷新来达到重新渲染，但是当如果存在分页，我们在比如第3页进行删除操作，如果按照以往的刷新方法，刷新完后便进入了第一页，这肯定不是我们想要的，这时候我们常用的做法是重新调用数据渲染方法，通常我们会有获取数据接口，删除接口等等，页面加载时调用获取数据的方法，当我们执行删除操作时，再重新调用获取数据的方法即可。