1. The most direct way to refresh the entire page:
this.$router.go(0);//刷新
location.reload(); //刷新Note: Both of these can refresh the current page. The disadvantage is that it is equivalent to pressing ctrl+F5 to force a refresh. When the entire page is reloaded, there will be an instant blank page, which is not good for the experience! ! !
2. Create a new blank page supplierAllBack.vue. When you click OK, you will first jump to this blank page, and then jump back immediately. omitted here! ! !
3. Combined use of provide / inject
By declaring the reload method, control the display or hiding of router-view, thereby controlling the reloading of the page.
isRouterAlive ---true or false to control
Then inject the reload dependency provided by the App.vue component into the page that requires the current page refresh, and then call it directly with this.reload.
First: modify App.Vue as follows:
<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>Secondly, use and call as follows:
