使用this.$router.go(0)刷新页面,和F5一样,会有空白页时间。
可以通过provide / inject即可改变这种效果。
1 . 首先在App.vue里面:
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isRouterAlive: true
};
},
provide() {
return {
reload: this.reload
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true;
});
}
}
};
</script>
<style></style>

2 . 然后在具体页面中加上inject配置,具体如下:
// 那个页面需要使用加上这两段代码
inject: ['reload'],
this.reload();


本文介绍了一种在Vue项目中使用provide/inject实现路由刷新的方法,避免了使用$router.go(0)带来的页面空白时间,通过控制router-view的显示状态,实现了平滑的页面刷新体验。
1098

被折叠的 条评论
为什么被折叠?



