Intercepta los eventos de los botones de avance y retroceso del navegador a través de la API del historial en Vue.

Veamos la explicación de esta API en el documento de MDN:

Es decir, cuando hacemos clic en los botones de avance y retroceso del navegador o ejecutamos History.back() y History.forward(), se activará el evento popstate.

Entonces, ¿cuál es la relación entre esta API y el modo histórico de vueRouter?

Sabemos que el proyecto vue es en realidad una aplicación de una sola página y su estructura general es la siguiente:

Por lo tanto, nuestras diversas páginas de cambio de salto en el proyecto no requieren recursos html Todos se completan en un cambio de dominio HTML, lo que significa que podemos cambiar el contenido en la pestaña de vista de ruta, pero podemos cambiar de página a través de los botones de avance y retroceso del navegador. La clave para la implementación es escuchar el evento popstate y cambiar el contenido en la pestaña de vista de ruta según la información relevante.

Aquí es necesario introducir otra API, History.pushstate

Lea también la introducción del documento MDN:

Esta API agregará una API al navegador Estado de la pila del historial, por ejemplo:

Por ejemplo, si actualmente se encuentra en la página A, salte de la página A a la página B y luego ejecute History.pushState() en la página B, haciendo clic en la parte posterior del navegador. El botón no volverá. La página A seguirá estando en la página B.

Lea los documentos MDN de las dos API:

popstate

history.pushState

Entonces, el modo historial de vueRouter es simple Es decir, escuche el evento popstate y ejecute el evento para cambiar la visualización del dom; luego ejecute History.pushState () cuando se cambie la ruta y luego active manualmente el evento para cambiar la visualización del dom.

Ahora volvamos al tema, ¿cómo interceptar los botones de avance y retroceso del navegador en vue? Recientemente encontré un requisito que requiere la implementación de esta función:

Hay una lista de componentes de lista:

La página de lista tiene muchos datos y cada dato solo muestra información básica. información. Luego haga clic en cada elemento para mostrar detalles sobre cada elemento y saltar a la página de detalles.

Este requisito es muy común y hay muchas formas de implementarlo, como el enrutamiento dinámico. Pero si es enrutamiento dinámico, la página de lista se actualizará cuando regrese a la página de lista, y allí. no hay manera de mantenerse con vida. La interacción no es muy amigable. Normalmente la implemento mediante el cambio de componentes:

V-show oculta la lista y v-if inicializa el componente detallado. Pero hay otro problema con esta forma de escribir. Cuando se muestra la página de detalles, no puede regresar a la página de lista mediante el botón Atrás del navegador porque solo pueden usar su propio botón Atrás dentro del mismo componente y ruta. Para considerar el comportamiento habitual del usuario, al hacer clic en el botón Volver en el componente de detalles, debe regresar a la página de lista.

Combinado con lo anterior, al ingresar al componente de detalles, este comportamiento se considera como ingresar a una nueva página, por lo que es necesario agregar un estado a la pila del historial de la sesión del navegador:

History.state almacena información sobre la sesión actual del navegador, incluido cuál es el estado de avance y cuál es el estado de retroceso. En el ejemplo anterior, le agregué una identificación. History.pushState tiene tres parámetros. El primer parámetro es Estado. El segundo parámetro se puede ignorar. La URL del tercer parámetro es opcional. Si no se pasa ningún tercer parámetro, la URL actual no cambiará.

Cuando se ejecuta el método goDetail anterior, se mostrará el componente de detalle. Si la lista / de la ruta de la página de lista salta de la ruta / home, cuando se muestra la página de detalles, haga clic en el botón Atrás del navegador. Debido a que se ha ejecutado History.pushState, la ruta / home no se devolverá. y todavía estará en la ruta /list.

Entonces, cuando estás en el componente de detalles, ¿cómo hacer clic en el botón Atrás para ocultar el componente de detalles y mostrar la lista?

En este punto, es necesario monitorear el evento popstate. Agregué un logotipo al estado en History.pushState, con la clave como identificación, y cambié los componentes juzgando si existe este logotipo:

Al mostrar el componente de detalles, haga clic en el botón Volver para activar el estado emergente event.history.state vuelve al estado en el que no se ha ejecutado History.pushState, es decir, History.state no tiene identificación, por lo que el componente de detalles se ocultará en este momento, haga clic en el botón de avance del navegador nuevamente y haga clic en el historial. state volverá al estado donde se ejecutó History.pushState. Usando el logotipo de identificación, se mostrará el componente de detalles.

Esto muestra que el cambio de componentes bajo la misma ruta está controlado por los movimientos hacia adelante y hacia atrás del navegador.

Basado en los requisitos detallados de cambiar una lista y un dato en un componente, la comprensión de las dos API históricas involucradas deja mucho que desear. Si tienes alguna opinión mejor, por favor házmelo saber.

Soy un pato, te deseo felicidad.