mecanismo de enrutamiento frontal del enrutador(Historial,hash)
El enrutamiento de front-end, como su nombre indica, es el administrador de estado de front-end para diferentes páginas. Puede lograr directamente los efectos de varias páginas a través de la tecnología de front-end sin enviar solicitudes. al fondo.
Hay dos métodos de implementación y principios del mecanismo de enrutamiento front-end
1. Registro histórico
La interfaz de registro histórico permite a la persona que opera el navegador ver la página en una pestaña o marco Acceder al historial de sesiones en formato .
El historial de visitas de los usuarios a páginas web generalmente se almacena en un objeto similar a una pila, es decir, el objeto de historial:
El objeto de historial contiene los registros visitados por el usuario ( en la ventana del navegador) La URL de
El objeto de historial es parte del objeto de ventana y se puede acceder a él a través de la propiedad window.history.
El uso básico de la API (como retroceder, avanzar y avanzar) no se explica mucho, puede consultar MDN
Concéntrese en explicar la nueva API de html5:
1. History.pushState() // Agrega nuevos registros de navegación al objeto del historial
2. History.replaceState() // Reemplaza el registro actual en el historial
3 .historial .state // es un atributo que obtiene la información del estado de la página actual.
4. window.onpopstate // es un evento que se activa cuando se hace clic en el botón de retorno del navegador o cuando js llama a forward(), back(), go().
(También existe un método similar llamado onhashchange, que es una API antigua que es altamente compatible con los navegadores. Originalmente se usaba para monitorear
cambios en los valores hash, pero puede también se utiliza para monitorear los eventos hacia adelante y hacia atrás del cliente, mientras que onpopstate se usa especialmente para monitorear el navegador
El método onpopstate es un método para escuchar eventos del navegador. onpopstate se usa específicamente para escuchar eventos del navegador.
Admite no solo hash, sino también reenvío. y también se admiten URL de origen sin hash).
La diferencia entre History.pushState e History.replaceState
Tanto History.pushState como History.replaceState reciben tres parámetros: a saber (datos[,título][,url])
Objeto de estado: un objeto asociado con una nueva entrada del historial creada mediante el método pushState.
título: normalmente vacío
dirección (url): la dirección de la nueva entrada del historial.
Tanto pushState como replaceState operan en el historial del navegador y no hacen que la página se actualice.
La diferencia entre ambos es que uno suma y el otro reemplaza.
El modo historial es una nueva característica de HTML5, que es más hermosa que las URL con hash.
La primera es el hash.
A menudo lo vemos en las URL con el símbolo #, este # en el enrutamiento se llama hash, y los sistemas de enrutamiento de muchos marcos grandes se implementan mediante hash.
El método onhashchange event mencionado anteriormente para monitorear los cambios de hash también se puede utilizar para el monitoreo de eventos hacia adelante y hacia atrás del lado del cliente.