Table of contents
foreword
In the past two weeks, I am writing a background management. Every time I call the interface to add, delete, modify and check, I need to refresh the current page or refresh the data. If you manually click on the small circle in the browser, it is not only cumbersome, but the user experience is extremely poor, and no one will actually ask the user to manually refresh it. . . This problem can be called a front-end bug. Then, following this question, after a search, we sorted out several methods to refresh the current page, as follows:
Method 1: location.reload
In the process of learning JS, everyone should have known the Browser object , and the Location object is a part of the window object . There is a method in the Location object , which is reload()the method, which is used to refresh the current document, similar to the refresh page button on the browser.
Code test:
<template>
<div class="hello">
<img src="../imgs/01.jpg" alt="" />
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
location.reload();
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
Show results:
Disadvantages: I think everyone can see it, twinkling and twinkling~
Method 2: $router.go(0)
This method should be familiar to everyone, and everyone who has learned vue routing jump knows $router.go()the function:
> this.$router.go(-1)：后退+刷新；
> this.$router.go(0)：刷新；
> this.$router.go(n) ：前进n个页面
This method is equivalent to the above location.reload, and also uses the refresh function of the browser to refresh by pressing F5 crazily. . .
Code test:
<template>
<div class="hello">
<img src="../imgs/02.jpg" alt="" />
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
this.$router.go(0);
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
Show results:
Cons: Visible to the naked eye! There will be a blank page for a moment, and the user experience is not good.
Method 3: provide, inject and $nextTick
First, let's get acquainted with the set of options:
The provide option should be: an object or a function returning an object.
The inject option should be: an array of strings, or an object whose [key] is the local binding name.
When learning Vue parent-child component communication, everyone should know what this is for: the parent component passes providedata to the child component, and the child component obtains injectthe data.
So $nextTickwhat's the matter again?
$nextTickIt is also another life cycle function of Vue: after you modify the data (data is updated), Vue will help you operate the DOM, put the real DOM into the page (Dom update rendering), and Vue will call it for us This function (you can listen to the DOM element being modified, and write the logic you want to execute in this function).
Next, let's combine ideas: we control the way the child component is destroyed and rebuilt by adding it in the parent component, so as to control the reloading of the page
. Then inject dependencies , and call the refresh directly through it.<router-view></router-view>v-ifreloadthis.reload
Code test:
App components:
<template>
<div id="app">
<HelloWorld v-if="isReload" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
data() {
return {
isReload: true,
};
},
components: {
HelloWorld,
},
provide() {
return {
msg: "未刷新",
reload: this.reload,
};
},
methods: {
async reload() {
this.isReload = false;
await this.$nextTick();
this.isReload = true;
},
},
};
</script>
Subassembly:
<template>
<div class="hello">
<img src="../imgs/03.jpg" alt="" />
<p>{
{
msg }}</p>
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
inject: ["reload", "msg"],
name: "HelloWorld",
methods: {
refresh() {
this.msg = "我刷新啦！";
this.reload;
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
Show results:
Disadvantages: You can see that the page will not be whitened, but this method also has many disadvantages. We all know that after Vue modifies the data, the view will not be updated immediately, but after all the data changes in the same event loop are completed, the view will be updated uniformly. This is easy to cause an event loop; and it is a bit cumbersome to use provideand injectalso involve multi-level communication of components.
Method 4: Create a blank page
This method... I have never used it before. It is to use routing to jump to a blank page, and then immediately switch to the original page $router.replacein the blank page . No new records will be added to the history, and when the routing jumps faster, there will be no momentary blank page.$router.replace$router.replace
Code test:
blank page:
<template>
<div class="hello"></div>
</template>
<script>
export default {
name: "HelloTest",
created() {
this.$router.replace(this.$route.query.redirect);
},
};
</script>
<style scoped>
</style>
Pages that need to be refreshed:
<template>
<div class="hello">
<img src="../imgs/04.jpg" alt="" />
<button @click="refresh">点击刷新页面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
this.$router.replace(`/blank?redirect=${
this.$route.fullPath}`);
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
routing:
const router = new VueRouter({
mode: 'history',
routes: [{
path: "/",
component: () => import('../components/HelloWorld.vue'),
meta: {
keepAlive: true,
}
},
{
path: "/blank",
component: () => import('../components/HelloTest.vue'),
meta: {
keepAlive: true,
}
}]
})
Show results:
Cons: Everyone should be able to see changes in the address bar. . .
The above are the more common current page refresh methods, each with its own advantages and disadvantages, and used according to the application scenario.
If wrong, please correct me!
