La diferencia entre el modo hash y el modo historial en Vue-router
Respuesta blanca: URL de patrón hash con signo #, patrón de historial sin signo #.
Respuesta:
Formalmente: siempre hay un signo # en la URL del patrón hash, que se utiliza de forma predeterminada durante el desarrollo. Si el usuario considera la especificación de la URL, debe utilizar el modo histórico, porque el modo histórico no tiene el signo # y es una URL normal, adecuada para promoción y publicidad.
Función: Para; Por ejemplo, cuando desarrollamos una aplicación, compartimos la página y luego usamos vue o reaccionamos para compartir la página con aplicaciones de terceros. En aplicaciones de terceros, algunas aplicaciones no permiten que aparezca el signo # en la URL, por lo que es necesario eliminar el signo #. En este momento, debemos usar el modo histórico. Sin embargo, existe otro problema con el uso del modo histórico. La razón es que al acceder a la página secundaria, actualice la operación, se producirá un error 404. En este momento, debe cooperar con el personal de back-end y dejarle configurar la URL de apache o nginx. La redirección de URL de nginx está bien si redirige a tu página de inicio
Modo hash: es decir, la URL con el símbolo # en la barra de direcciones
Por ejemplo, esta URL: /#/ hola, el valor hash es #/hola
Su característica es: aunque el hash aparezca en la URL, no se incluirá en la solicitud HTTP.
Las solicitudes HTTP no tienen ningún impacto en el fondo, por lo que cambiar el hash no recarga la página.
Modo historial: aprovecha los nuevos métodos pushState() y replaceState() en la interfaz de historial HTML5. (Requiere soporte específico del navegador)
Estos métodos se aplican a la pila del historial del navegador y brindan acceso al historial además de los métodos back(), forward() y go() existentes. cambios. Cuando estos dos métodos realizan modificaciones, solo pueden cambiar la URL de la barra de direcciones actual, pero el navegador no enviará una solicitud al backend ni activará la ejecución del evento popstate.
Es decir , en la URL de la barra de direcciones El símbolo #, y este # es el símbolo de almohadilla, que es el nombre chino del símbolo de almohadilla o ancla
Por ejemplo, para esta URL: /#/home, el hash el valor es # /home
Lo que tiene de especial esto es que, aunque el símbolo hash está presente en la URL, no está incluido en la solicitud HTTP y no tiene ningún efecto detrás de escena, por lo que cambiar el hash El símbolo no recarga la página.
El modo hash de la ruta en realidad utiliza el evento window.onhashchange, lo que significa que si el valor hash (# seguido del valor) en su URL cambia, el evento de escucha de cambio de hash se llamará automáticamente. obtenga la URL modificada en el evento de escucha de cambio de hash para encontrar la página correspondiente para cargar.
Los métodos PushState() y replaceState() (requieren soporte específico del navegador) son características nuevas de la interfaz de historial HTML5 y se pueden usar para saltar URL sin recargar la página, pero este modo requiere configuración y soporte en segundo plano. Dado que nuestra aplicación es una aplicación cliente de una sola página, si el backend no está configurado correctamente, necesitaremos configurar una página 404 en el frontend nosotros mismos.
La función de estos dos artefactos, pushState() y replaceState(), es reemplazar la URL sin actualizar la página. Esto es como intentar vender carne de perro pretendiendo ser una oveja. vaya al servidor para solicitar los recursos en la ruta. Una vez actualizado, se revelará la "cabeza de oveja" que en realidad no existe, mostrando 404 (ruta real), 404 (ruta), 404 (ruta), 404 (ruta) y 404. (camino). El método pushState y el método replaceState solo pueden hacer que el objeto del historial cambie, cambiando así la URL de la barra de direcciones actual, pero el navegador no enviará una solicitud en segundo plano ni se activará el evento popstate.
El evento popstate solo se activa cuando se hace clic en los botones de avance y retroceso del navegador.
En general, el hash y el historial están bien, a menos que esté más preocupado por el valor del símbolo #. El símbolo # parece un poco feo en las URL.
Si no quieres hashes feos, puedes usar el modo de historial de la ruta, que aprovecha la API History.pushState para saltar URL sin recargar la página. Vue-router Además, según Mozilla Develop Network, llamar a history.pushState() tiene las siguientes ventajas sobre modificar directamente el valor hash:
La nueva URL establecida por pushState() puede ser del mismo origen como la URL actual Cualquier URL, y el valor hash solo puede modificarse mediante la parte posterior a # en la URL, por lo que solo puede modificarse mediante la parte posterior a #. pushState() solo puede modificar la parte después de #, por lo que solo puede establecer la URL en el mismo documento que la URL actual
La nueva URL establecida por pushState() puede ser exactamente la misma que la URL actual , que también El registro se agrega a la pila; el nuevo valor establecido por el hash debe ser diferente para activar la operación de agregar el registro a la pila
pushState() puede agregar cualquier tipo de datos a el registro a través del parámetro stateObject; el hash solo puede agregar una cadena corta
pushState() puede establecer adicionalmente el atributo de título para uso posterior
El enrutamiento tradicional significa que cuando un usuario accede a una URL , el servidor correspondiente recibe la solicitud. Luego analiza la ruta de la URL y luego ejecuta la lógica de procesamiento correspondiente. Esto completa la distribución de la ruta.
El enrutamiento front-end no involucra al servidor, sino que lo implementa el front-end mediante hash o la API de historial de HTML5, que generalmente se usa para mostrar y cambiar contenido diferente.