Hablar sobre la comprensión del historial de enrutamiento front-end y el hash

hash Es  history una pregunta muy común en las entrevistas de front-end. Muchas personas pueden tener una comprensión diferente de la historia y el hash. Los campos de URL de los dos no tienen el signo # y el otro tiene el signo #. Pero, ¿alguna vez ha pensado por qué esto es así? ¿Entonces? ¿Cuál es la diferencia entre tener # y no? Este artículo habla sobre mi comprensión del historial de enrutamiento front-end y el hash.

hash Ambos  history se pueden usar en proyectos de separación de front-end y back-end, y ambos tienen sus propias características y escenarios de uso.

1. Principio de enrutamiento frontal

1, SPA

SPA significa Aplicación de una sola página . La llamada Webaplicación de una sola página es una aplicación con una sola Webpágina. A diferencia de hace mucho tiempo, la interacción del front-end es saltar en varias páginas, y cada página existe de manera relativamente independiente. Una aplicación de una sola página debe continuar una página Cambia dinámicamente el contenido renderizado de la página. Una aplicación de una sola página (SPA) es una aplicación que carga una sola HTMLpágina y actualiza dinámicamente esa página a medida que el usuario interactúa con la aplicación . WebEl navegador cargará inicialmente el HTML, CSSy JavaScript, y todas las operaciones se realizan en esta página, controlada JavaScriptpor .

Hoy en día, para hacer frente Webal rápido desarrollo de las aplicaciones de una sola página, surgen sin cesar varias pilas de tecnología de componentes front-end . En los últimos años, a través de iteraciones continuas de versiones, las dos pilas de tecnología principales vuey reactlas dos pilas de tecnología han pasado a primer plano, convirtiéndose en las dos pilas de tecnología más populares en la actualidad.

2. ¿Cuándo se necesita el enrutamiento?

La mayoría de los marcos que se utilizan actualmente en China son Vue, y Vue hereda la forma de desarrollo de aplicaciones de una sola página. Y vue-routeres vuela configuración estándar de enrutamiento de , y vue-routertiene dos modos : hashy history.

A continuación se explicarán estos dos modos uno por uno.

2. Modo hash

1. Definición

hash El modo es un modo  en el que la ruta de la ruta de front-end  # se empalma con marcas hash después de la real  . urlCuando cambia la ruta detrás del signo de libra  # , el navegador no reinicia la solicitud, sino que activa  onhashchange un evento.

Por ejemplo: http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb

2. Las características del hachís

• El cambio de hash activará el salto de la página web, es decir, el avance y retroceso del navegador.

• hashSe puede cambiar url, pero no activará una recarga de página (el cambio de hash se registra en window.history), es decir, la página no se actualizará. En otras palabras, todos los saltos de página se realizan en el lado del cliente. Por lo tanto, esto no se considera una httpsolicitud, por lo que este modo no es propicio para SEOla optimización. hashSolo puede modificar #la parte posterior, por lo que solo puede saltar al urlmismo documento que el actual url.

• hashPor window.onhashchangemedio de , para monitorear hashlos cambios de , a fin de realizar la función de salto sin actualización.

• hashNunca se someterá al serverfinal (se puede entender que solo vive y muere en la parte delantera).

3. Modo de historial

1. Definición

history API Es  H5 una nueva función que permite a los desarrolladores cambiar directamente el enrutamiento del front-end , es decir, actualizar la  URL dirección del navegador sin reiniciar la solicitud .

2. API de historial

Varias HTML5adiciones se describen a continuación history API. Los detalles son los siguientes:

API	definición
history.pushState(datos, título [, url])	pushState se utiliza principalmente para agregar un registro en la parte superior de la pila de historial . Los parámetros se analizan de la siguiente manera: ①datos se pasarán como parámetro cuando se active el evento onpopstate; ②título es el título de la página, y todos los navegadores actuales ignorarán este parámetro; ③url es la dirección de la página, que es opcional, y será la dirección de la página actual si falta
history.replaceState(datos, título [, url])	Cambie el historial actual, los parámetros son los mismos que los anteriores; se agrega el pushState anterior, este cambio
historia.estado	Se utiliza para almacenar los datos de los métodos anteriores, y los permisos de lectura y escritura de diferentes navegadores son diferentes.
ventana.onpopstate	Respuesta a llamadas pushState o replaceState

3. Las características de la historia

Para history, las características principales son las siguientes:

• El nuevo urlpuede tener urlel mismo origen que el actual url, o puede tener la urlmisma dirección que el actual, pero esto causará el problema de que la operación repetida se registrará en la pila.
• Pasa history.state, añade cualquier tipo de dato al registro.
• Se pueden establecer propiedades adicionales titlepara su uso posterior.
• A través de pushState, replaceStatepara realizar la función de salto sin actualización.

4. Hay problemas

Para history, resuelve muchos de hashlos problemas existentes de , pero también trae nuevos problemas. detalles de la siguiente manera:

• Al usar historyel modo, al actualizar la página actual, el navegador reiniciará la solicitud. Si nginxno hay ninguna coincidencia para obtener la actual url, 404aparecerá la página de.
• En cuanto al hashesquema, parecerá haber cambiado url, pero no se incluirá en httpla solicitud. Por lo tanto, se usa para guiar las acciones del navegador y no afecta el lado del servidor. Por lo tanto, el cambio hashrealmente no cambia url, por lo que la ruta de la página sigue siendo la ruta anterior y nginxno será interceptada.
• Por lo tanto, al usar historyel modo, es necesario permitir que la dirección sea accesible a través del servidor.Si no está configurado, conducirá fácilmente a 404la situación que aparece.