Cómo mantener usted mismo los registros de salto de ruta en Vue.js
En proyectos Vue, si queremos realizar operaciones de retorno y reversión, generalmente llamamos api router.go(n), pero en aplicaciones reales, existe un riesgo al usar esta API, es decir. Hará que los usuarios salgan de la aplicación actual, porque registra el registro de acceso del navegador, no el registro de acceso de su aplicación actual, lo cual da mucho miedo.
La solución es mantener tú mismo el registro histórico de saltos.
Estudios de casos y escenarios de uso
Dirección del código:/dora-zc/mini-vue-mall (descarga local)
Esto está basado en Vue.js Caso de pequeño centro comercial, escenario de aplicación:
Implementé un complemento de Vue src/utils/history.js para mantener el salto histórico de la página y controlar el salto de retorno a través de la pila.
Hacer clic en el botón Atrás es una operación emergente
en el enrutador de enrutamiento global.
js, antes de crear una instancia de la ruta, extienda el método back() del enrutador a través del prototipo
Almacenar el historial en global afterEach
Implementación del código
Historial de ejecución Complemento para mantener historial
// src/utils/history.js
const Historia = {
_history: [], // Pila de historial
install(Vue) {
// Proporciona el método de instalación requerido para el complemento Vue
Object.defineProperty(Vue.prototype, '$routerHistory', {
get() {
Historial de retornos;
}
})
},
push(ruta) { // ir a la pila
this._history.push(ruta);
},
pop() {
this._history.pop();
},
canBack() {
devolver this._history.length > 1 ;
}
}
exportar historial predeterminado;
Extender el método back() antes de crear una instancia de la ruta
// src/router.js
importar Vue desde 'vue'
importar enrutador desde 'vue-router'
importar historial desde '
Vue.use(Router);
Vue.use(History);
// Extender el enrutador antes de la creación de instancias
Router.prototype. goBack = function () {
this.isBack = true;
this.back();
}
Registrar historial de saltos en ruta global afterEach
// src/router.js
// Registrar historial en afterEach
router.afterEach(( to, from) => {
if (router.isBack) {
// back
History.transitionName = 'ruta-regreso';
} else {
Historial.push(to.path);
Enrutador.
TransitionName = 'route-forward';
}
})
Utilizado en el componente de encabezado público
// Hearder.vue
{{title}}