有时候因为功能需要,需要项目刷新页面,使页面回到初始状态,在Vue中有四种思路来实现:
1.重新路由到当前页面(不可行)
2.使用强制刷新(可行)
3.跳转其他页面再跳回(可行)
4.provide/inject模式(可行,推荐)
第一种测试失败,没有任何作用,读者可以自行实验
第二种方式主要有两种方式来实现
reloadPage () {
location. reload()
}
或
reloadPage () {
this.$router.go(0)
}
上面两种方式都可行,但是效果是相当于F5刷新页面一样,整个页面重新加载和渲染,会留下短暂的白屏时间,影响体验。
第三种方式不会引起页面的瞬间白屏,只会在地址栏部分瞬间变化一下,如果对此没什么要求可以采用这种方案。
第四种(推荐),通过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>
<style>
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-top: 0px;
}
</style>
不要忘记给template中的 route-view 加上 v-if="isRouterAlive"
然后在需要刷新页面的页面中通过inject注入并在方法中调用即可
export default {
inject: ['reload'],
name: 'test',
...
methods: {
reloadPage () {
this.reload()
}
}
}