Principios de enrutamiento de Vue
En una sola página, el enrutamiento describe la relación de mapeo unidireccional entre la URL y la interfaz de usuario, es decir, los cambios en la URL harán que la interfaz de usuario se actualice sin actualizarse.
Uno de los principios básicos: simplemente actualizar la vista sin volver a solicitar la página
Hay dos formas de hacer esto: 1. Hash usando el hash en la URL (" # ") 2. Utilice la interfaz de historial agregada en h5
¿Cuál es la diferencia entre hash e historial?
Para implementar el enrutamiento front-end, es necesario resolver dos problemas principales:
1. ¿Cómo cambiar la URL sin que la página se actualice?
2. ¿Cómo detectar si una URL ha sido actualizada?
Los dos problemas principales anteriores se implementan de dos maneras: hash y registro de historial:
1. Modo hash
Hash es el hash de la URL El valor hash ('#') y la parte después de la URL generalmente se usan como puntos de anclaje en la página para la navegación
Monitoree los cambios en la URL a través del evento de cambio de hash, y la forma de cambiar la URL no es más que lo siguiente:
(1) Cambie la URL moviendo el navegador hacia adelante y hacia atrás
(2) Cambie la URL usando la etiqueta
2. Modo historial
El historial proporciona los métodos pushState y replaceState. El historial proporciona un evento popstate similar al evento hashchange, pero el evento popstate es algo diferente. :
(1) Cambiar la URL hacia adelante y hacia atrás a través del navegador activará el evento popstate
(2) A través de pushState y replaceState o el cambio de etiqueta (3) Pero podemos interceptar llamadas pushState y replaceState o (4) Pero podemos interceptar llamadas pushState y replaceState O lt; Marcar clic (5) El evento popstate es similar al evento hashchange. gt; evento de clic de la etiqueta para detectar cambios de URL (4) El evento se puede activar llamando a los métodos de historial atrás, adelante y atrás a través de js El núcleo del enrutador Vue es a través de Vue.use registra el complemento y obtiene el objeto de enrutador configurado por el usuario en el método de instalación del complemento. Cuando cambia la dirección del navegador, la ruta correspondiente coincide con el objeto del enrutador, se obtiene el componente y luego el componente se representa en la vista. (1) Cómo obtener el objeto de enrutador configurado por el usuario en el método de instalación Puede utilizar la función beforeCreate en la función de ciclo de vida mixto de Vue.mixin. puede obtener la propiedad en la instancia de vue y asignarla a la cadena de prototipos de vue. (2) Cómo activar actualizaciones Modo hash: Activa actualizaciones cambiando el valor hash de ubicación.hash, by La práctica hashchange escucha las actualizaciones activadas hacia adelante o hacia atrás del navegador. Modo historial: Cambie la dirección del navegador a través de History.pushState para activar actualizaciones Supervise el navegador para avanzar o retroceder escuchando el evento popstate; Activar actualización; Cómo presentar el componente de vista del enrutador Presentar el componente de vista del enrutador a través de Vue.observable y crear el objeto de monitor actual. Representa el componente de vista del enrutador a través de Vue.observable Crea un objeto de monitor actual en la instancia del enrutador, que guarda la ruta actual Cuando el navegador; Cuando la dirección cambia, cambie la corriente del objeto de monitoreo; Monitoree los cambios en la corriente del objeto de monitoreo en la formación de la vista del enrutador. Cuando la corriente cambie, obtenga el componente correspondiente registrado por el usuario y use la función h para. Cambie los componentes que se representan en vnodes, que a su vez actualizan la vista de la página.