vue不用window的方式如何刷新当前页面
作者：donggua_123
这篇文章主要介绍了vue不用window的方式如何刷新当前页面,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目中我们很多时候需要刷新页面，比如本地用户信息更新后，或者需要重新加载当前页面的数据时，使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新，和h5快捷键一样，会有短暂空白出现，体验很不好，这里说两种在vue项目里使用的无感知刷新页面方法：
一、provide/inject方法
父组件中provide提供的属性可以在任何子组件里通过inject接收到，那么我们在App页面动态改变总路由的显示和隐藏来达到刷新的效果。
在App页面定义一个reload方法：
App.vue
reload() {
this.defaultActive = false;
this.$nextTick(() => {
this.defaultActive = true;
});
}defaulActive用于控制页面的显影：
<template>
<div id="app">
<router-view v-if="defaultActive" />
</div>
</template>provide提供子组件访问的入口：
provide() {
return {
reload: this.reload
};
}在需要刷新的页面通过inject接收到该全局方法：
page.vue
inject: ["reload"]
需要刷新的时候调用该方法：
refresh() {
this.reload();
}全部代码：
App.vue：
<template>
<div id="app">
<router-view v-if="defaultActive" />
</div>
</template>
<script>
export default {
provide() {
return {
reload: this.reload
};
},
data() {
return {
defaultActive: true
};
},
methods: {
reload() {
this.defaultActive = false;
this.$nextTick(() => {
this.defaultActive = true;
});
}
}
};
</script>page.vue
<script>
export default {
inject: ["reload"],
data() {
return {};
},
methods: {
refresh() {
this.reload();
}
}
};
</script>二、中间页面重定向
可以新建一个页面reload.vue,当page.vue需要刷新的时候，将路由指向reload页面，再跳转回page页面，由于页面的key发生了变化，所以页面会被刷新
page.vue:
refresh() {
const { fullPath } = this.$route;
this.$router.replace({
path: "/redirect",
query: { path: fullPath }
});
}reload.vue:
<script>
export default {
name: "reload",
props: {},
beforeCreate() {
const { query } = this.$route;
const { path } = query;
this.$router.replace({
path: path
});
},
render(h) {
return h();
}
};
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。