La diferencia entre enrutamiento histórico y hash

Con el lanzamiento de la API histórica de HTML5, nació un nuevo modelo de enrutamiento basado en ella.

En comparación con el enrutamiento hash tradicional, recopilé tres excelentes resúmenes en línea.

Principio:

El valor hash corresponde al # en la URL. El principio es monitorear los cambios en el valor hash a través del evento hashChange () y determinar si cargar la ruta correspondiente y cargar el componente correspondiente de acuerdo con el valor hash correspondiente a la tabla de enrutamiento.

Ventajas:

1. Solo el front-end necesita configurar la tabla de enrutamiento y el back-end no participa.

Desventajas:

Para comprobar si tu navegador admite historial, simplemente introduce historial en la consola.

Principio:

El historial utiliza la pila del historial del navegador, incluidos los métodos back, forward, go y go, y luego agrega los métodos pushState() y replaceState() en HTML5 para proporcionar modificaciones históricas. función. Pero al modificar, aunque la URL actual ha cambiado, el navegador no enviará inmediatamente una solicitud al backend.

Ventajas:

1. Cumple con las especificaciones de la dirección URL, no se necesita # y es más bonito de usar.

Desventajas:

1. Cuando el usuario ingresa manualmente la dirección o actualiza la página, se iniciará una solicitud de URL. El backend debe configurar la página index.html. el usuario no puede coincidir con el recurso estático; de lo contrario, se producirá un error 404.

2. La compatibilidad es muy pobre porque utiliza los nuevos métodos pushState() y replaceState() en el objeto Historial HTML5, lo que requiere el soporte de navegadores específicos.

Personalmente, creo que es mejor usar hash. Después de todo, los usuarios no prestan atención al aspecto de la URL y el enrutamiento hash puede ahorrar solicitudes de recursos. Y a menos que se escriban juntos, es inevitable que las URL de front-end y back-end no estén completamente sincronizadas, y vue-router también usa el modo hash de forma predeterminada. Pero hay excepciones, como usar el modo histórico al generar diferentes rutas en función de los permisos.

Finalmente, recomiendo un análisis del código fuente de vue-router.