Vue项目刷新页面的几种方法总结 / 开普饭

利用vue做的后台管理系统是单页面系统，当你想实现刷新的功能通常有以下几个方法：

(1)window.location.reload()

　　这个是原生js中提供的一种刷新方法，用于刷新当前文档。

(2)this.$router.go(0)

　　vue-route提供的一种方法，在history记录中前进或者后退val步，当val为0时刷新当前页面。

　　以上两种方法，用的人都知道，这两种方法都类似于浏览器上的刷新页面按钮。回导致页面出现短暂的闪烁（重新加载页面），虽然简单粗暴，但是用户体验极差。

　　其实，局部的刷新就是小组件之间的刷新。最多的刷新场景就是对table列表中某条数据打开dialog框进行增删改之后刷新table的操作。这种可以每个页面都单独写好一个查询表格的公共的方法，在mounted周期的时候可以调用用于页面打开的时候默认展示table数据，需要的时候也可以调用用于刷新table数据。或是考虑以下两种方法，但是以下两种方法其实也是依靠mounted这个钩子函数来进行刷新的，只是少声明了一个公共方法而已。

(3)先跳转到一个空白组件，在跳转回原组件，触发钩子函数重新渲染达到刷新的目的。

首先，先定义一个空白组件：

<template>
    <div></div>
</template>

<script>
    export default{
        data() {
            return{
            }
        },
        beforeRouteEnter (to, from, next) {
            next(vm=>{
                vm.$router.replace({
                    path:from.fullPath
                })
            })
        },
    }
</script>

　　该空白组件需要在route.js中定义path以及component路径；其中next(vm=>{})这个里面的代码块里的代码很晚执行，在组件mounted周期之后才会被执行，执行的结果为跳回原组件。然后在需要刷新的地方调用this.$router.replace({path:'/XXXX'})，其中XXXX为之前route.js中定义的空白组件的path。导航栏里的url地址切换很快，基本看不到空白组件与原组件之间路径名切换。

(4)利用组件的provide/inject选项(推荐)。

　　这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

先在App.vue中声明一个reload方法

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

然后在需要刷新的页面中这样注入。

<script>
export default {
    inject:['reload'], //注入App.vue组件提供（provide）的 reload 依赖
    data () {
        return {
            //.......
        }
    },
    mounted:function(){
        //默认请求数据
    },
}
</script>

最后，在需要刷新的地方直接调用this.reload()即可。这样App.vue中的<router-view></router-view>会因为v-if快速的由显->隐->显(true->false->true)。但因为v-if是通过控制dom节点的存在与否来控制元素的显隐，切换有一个局部编译/卸载的过程，所以切换过程中会销毁和重建内部的事件监听和子组件，以此达到刷新组件的目的。

Vue项目刷新页面的几种方法总结

相关推荐