¿Cómo actualiza el proyecto vue la página actual sin saltar de una página en blanco?

1. La forma más directa de actualizar toda la página:


 this.$router.go(0);//刷新
 location.reload(); //刷新

  Nota: Ambos pueden actualizar la página actual. La desventaja es que es equivalente a presionar ctrl+F5 para forzar una actualización. Cuando se vuelve a cargar toda la página, habrá una página en blanco instantánea, lo que no es bueno para la experiencia. ! ! !

2. Cree una nueva página en blanco supplierAllBack.vue Cuando haga clic en Aceptar, salte primero a esta página en blanco y luego regrese inmediatamente. omitido aquí! ! !

3. Uso combinado de proporcionar/inyectar

Al declarar el método de recarga, controle la visualización u ocultación de la vista del enrutador, controlando así la recarga de la página.

isRouterAlive ---verdadero o falso para controlar

Luego inyecte la dependencia de recarga proporcionada por el componente App.vue en la página que requiere la actualización de la página actual y luego llámelo directamente con this.reload.

 Primero: modifique App.Vue de la siguiente manera:

<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>

En segundo lugar, use y llame de la siguiente manera:

Supongo que te gusta

Origin blog.csdn.net/Youning_Yim/article/details/109509963
Recomendado
Clasificación