When we write a project, we often encounter that after the user has performed a certain action, he changes certain states, and needs to refresh the page to re-render the page. For example: user login successfully, add, delete, update, etc.
- Original method:
();
- Vue's own routing jump:
this.$(0);
Anyone who has used it knows that the first two are forced to refresh the page, which will cause a short flash and the user experience is not good.
So, we choose the third method:
- First, write the following code in the App:
<template>
<div >
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () { //The parent component provides variables through provide, and injects variables through inject in the child component. return {
reload:
}
},
data() {
return{
isRouterAlive: true //Controll the variables that control whether the view displays }
},
methods: {
reload () {
= false; //Close first, this.$nextTick(function () {
= true; //Open again })
}
}，
}
</script>
Next, we can write this in the component that needs to refresh the page:
export default {
inject:['reload'], //Reload method injected into the app data () {
return {
.......
}
},
Use in the code block that needs to refresh the page:
This is the end of this article about Vue refreshing pages using three methods. For more related content on Vue refreshing pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!