1、最直接整个页面重新刷新:
this.$router.go(0);//刷新
location.reload(); //刷新
注意:这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好!!!
2、新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来。此处省略!!!
3、provide / inject 组合使用方式
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。
isRouterAlive ---true or false 来控制
然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行。
首先:在App.Vue中修改如下:
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<style>
@import './assets/css/main.css';
/* 深色主题 */
@import './assets/css/color-dark.css';
</style>
<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>
其次,使用、调用如下: