利用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节点的存在与否来控制元素的显隐，切换有一个局部编译/卸载的过程，所以切换过程中会销毁和重建内部的事件监听和子组件，以此达到刷新组件的目的。
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
