La Red de Conocimientos Pedagógicos - Currículum vitae - Cómo mantener registros de salto de ruta en Vue.js

Cómo mantener registros de salto de ruta en Vue.js

Prefacio

En proyectos Vue, si queremos retroceder o retroceder, generalmente llamamos a api router.go (n), pero en la operación real, usar esta API es riesgoso, es decir, causará que los usuarios saltar de la aplicación actual porque registra los registros de acceso del navegador en lugar de los registros de acceso de su aplicación actual. Esto es algo que da mucho miedo.

La solución es mantener nosotros mismos un récord de salto histórico.

Casos y escenarios de uso

Dirección del código:/dora-zc/mini-vue-mall (descarga local)

Esto está basado en Vue.js Small En el caso del centro comercial, el escenario de la aplicación es:

Implementar un complemento de Vue src/utils/history.js, mantener el historial de saltos de página a través de la pila y controlar los saltos de retorno.

Hacer clic en el botón Atrás es una operación de pila.

En el enrutamiento global router.js, el método back() del enrutador se extiende a través del prototipo antes de crear una instancia de la ruta.

Almacenar registros del historial en global afterEach

Implementación del código

Implemente el complemento del historial y mantenga el historial.

// src/utils/history.js

const historial = {

_history: [], //pila de historial

Instalación (Vue) {

//Proporcione el método de instalación requerido por el complemento Vue.

objeto . definir propiedad(vue . prototipo, '$routerHistory', {

get() {

Volver al historial;

}

})

},

Push (ruta) { // mensaje

esto en la pila. _history.push(ruta);

},

pop() {

Esto. _ historial . pop();

},

canBack(){

Devuelve esto. _ History.length gt1;

}

}

Exportar historial predeterminado;

Expandir hacia atrás() antes del método de creación de instancias de ruta.

// src/router.js

Importar Vue desde "vue"

Importar enrutador desde "vue router"

Desde' Importar historial. /utils/history ';

Vue.use(router);

Vue.use(history);

//Ampliar el enrutador antes de la creación de instancias.

enrutador.prototipo.volver = función(){

this.isBack = true

esto atrás();

}

Después de cada vez, registre el historial de saltos en el enrutamiento global.

// src/router.js

//Después de cada registro del historial

router.afterEach((to, from)= gt; {

if (router.isBack) {

//Back

historia pop();

router.isBack = false

p>

enrutador . nombre de transición = 'ruta-regreso';

} De lo contrario {

historial push(to . path); p>router .transición nombre = ' ruta-forward ';

}

})

Para componentes de encabezado público

// Oyente.vue

lt plantilla gt

ltdiv class="header "

lth 1 gt; { { title } } lt/h 1 gt; /p >

ltI v-if = " $ historial del enrutador . can back()" @ click = " back " gt/I gt;

ltdiv class="extend " >> p>

ltslot gt lt/slot gt;

lt/div gt;

lt/div gt;

lt/template gt;

ltscriptgt

Exportar valor predeterminado {

Accesorios: {

Título: {

Tipo: cadena,

Valor predeterminado: ""

}

},

Método: {

back() {

Esto. $ enrutador .volver();

}

}

};

lt/script gt;

Vea el código completo:/dora-zc/mini-vue-mall (descarga local)

Resumen