Vue uses three methods to refresh the page

When we are writing projects, we often encounter situations where the user performs an action, changes certain states, and needs to refresh the page to re-render the page. Such as: user login successful, addition, deletion, update, etc.

Original method:

location.reload();

Vue's built-in routing jump:

this.$router.go(0);

Anyone who has used it knows that the first two force the page to refresh, which will cause a brief flicker and a poor user experience.
So, we choose the third method:

First, write the following code in the App:

<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () { //Provide variables in the parent component and inject variables in the child component through inject.                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return {
                isRouterAlive: true //Variable that controls whether the view is displayed}
        },
        methods: {
            reload () {
                this.isRouterAlive = false; //Close first,
                this.$nextTick(function () {
                    this.isRouterAlive = true; //Open again}) 
            }
        },
    }
</script>

Next, we can write this in the component that needs to refresh the page:

export default {
    inject:['reload'], //Inject the reload method in App data () {
        return {
    	.......
        }
    },

Use in the code block that needs to refresh the page:

This concludes this article about Vue's three methods of refreshing the page. For more relevant Vue refresh page content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of how to automatically refresh the page and refresh method after deleting Vue list data
How to handle the loss of parameters when refreshing the page when passing parameters to vue router
Vue router passes parameters and solves the problem of parameter loss when refreshing the page
Vue listens to route changes and refreshes the page in the App.vue file
Solve the problem of losing store data after Vue refreshes the page

<<: MySQL: mysql functions

>>: Docker-compose steps to configure the spring environment