① Realice el enrutamiento de front-end a través de location.hash
Hash se refiere a la parte después de # en la URL, que el servidor ignorará automáticamente, pero se puede obtener a través de location.hash en el navegador. Este método utiliza principalmente el evento onhashchange, que puede monitorear el cambio del valor hash en la URL para realizar algunas operaciones de cambio de DOM.
Las condiciones de activación del evento onhashchange son: a. Cambiar la dirección URL, agregar o cambiar su valor hash al final b. Cambiar location.href o location.hash c. Hacer clic en un enlace con un ancla d. El avance y retroceso del navegador puede causar hash El cambio es que los valores hash en las dos direcciones web son diferentes.Idea de implementación: cuando cambia el valor hash de la url en la barra de direcciones del navegador, se activará el evento onhashchange. esta vez, el navegador actual debe obtenerse a través de window.location.hash El valor hash de la URL, el valor hash en este momento es con #. Se pueden ejecutar diferentes funciones de devolución de llamada de acuerdo con diferentes valores hash, es decir, se cargan los componentes correspondientes. Método de implementación: este evento se activará cuando el valor hash cambie window.addEventListener('hashchange',fn)
② Use window.history para implementar el enrutamiento front-end
El objeto ventana tiene un atributo de historial, que se utiliza para guardar la lista de páginas visitadas por el usuario.Cuando navegamos por la página web, podemos avanzar y retroceder por este objeto.
En el proceso de implementación de enrutamiento front-end con historial, se utilizan principalmente las dos interfaces de history.pushState() y history.replaceState(). Ambos reciben tres parámetros, a saber, estado, título, URL y el estado se usa para almacenar información relevante que se insertará en la entidad de historial, que es un parámetro en formato json; el título es el título de la entidad de historial entrante y Firefox automáticamente ignorarlo ahora Este atributo, url se usa para pasar la ruta relativa de la nueva entidad de historial.Si su valor es nulo, significa que la entidad de historial actual que se insertará es consistente con la entidad anterior y no ha cambiado. La única diferencia entre los dos es que el método replaceState() sobrescribirá la última entidad histórica en lugar de agregarla directamente. Estos dos métodos no activarán activamente la actualización de la página del navegador, pero el contenido del objeto de historial, incluida la barra de direcciones, cambiará, y se realizará la respuesta correspondiente cuando se activen los eventos de historial, como avanzar y retroceder. El avance y el retroceso del navegador activarán el evento window.onpopstate Al vincular el evento popstate, ajax puede cargar el menú correspondiente de acuerdo con el contenido de la consulta en la dirección URL actual, para realizar el efecto de avance y retroceso de ajax.