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节点的存在与否来控制元素的显隐,切换有一个局部编译/卸载的过程,所以切换过程中会销毁和重建内部的事件监听和子组件,以此达到刷新组件的目的。

(0)

相关推荐