Cómo mantener registros de salto de ruta en Vue.js
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