1. ¿Por qué hay un enrutamiento de front-end?
Para los marcos de desarrollo de front-end progresivos como Vue, para construir una SPA (aplicación de una sola página), es necesario introducir un sistema de enrutamiento de front-end, que es el significado de Vue-Router. El núcleo del enrutamiento de front-end radica en cambiar la vista sin hacer una solicitud al back-end.
Ventajas:
buena experiencia de usuario, operación de usuario más conveniente,
componentes completos de front-end
Desventajas:
Cargue una gran cantidad de recursos por primera vez -> Solución: Cargue
bajo demanda No es amigable para SEO -> Solución: Núxt de renderizado del lado del servidor
Características: Cuando hay diferentes solicitudes, diferentes componentes se representan en la misma página
Principio : Los extremos frontal y posterior están separados (enfoque de back-end en datos, enfoque de front-end en interacción y visualización) + enrutamiento de front-end
2. El navegador ofrece actualmente dos rutas:
- hash: el símbolo # en la URL de la barra de direcciones (este hash no es una operación de hash en criptografía). Por ejemplo, esta
URL: http://www.abc.com/#/hello, el valor de hash es # / hello. Su característica es que aunque el hash aparezca en la URL
, no se incluirá en la solicitud HTTP y no tiene impacto en el backend, por lo que cambiar el hash no recargará la página.
Hash 路由（也就是锚点#），本质是是改变location的hash属性
利用 URL 上的 hash，当 hash 改变不会引起页面刷新，可以触发相应的 hashchange 回调函数配置路由（VueRouter会自动监听）
window.onhashchange = function() {
//更新页面内容
document.getElementById("demo").innerHTML = x
......
}
- history: utiliza los nuevos métodos pushState () y
replaceState () en la interfaz de historial de HTML5 . (Requiere soporte de navegador específico) Estos dos métodos se aplican a la pila del historial del navegador.
Según el retroceso, avance y avance existentes actualmente , proporcionan la función para modificar el historial. Es solo que cuando realizan la modificación, aunque se cambia la
URL actual , el navegador no enviará inmediatamente una solicitud al backend.
本质是通过h5新增的history.pushState({
},'','/home')或history.replaceState({
},'','/home')改变路径
pushState()、replaceState() 方法接收三个参数：stateObj、title、url
history.pushState({
color: "red"}, "red", "red") //设置状态
window.onpopstate = function(event) {
//监听状态
if(event.state && event.state.color === "red") {
document.body.style.color = "red" //更新页面内容
}
}
Por tanto, se puede decir que tanto el modo hash como el modo historial pertenecen a las características del propio navegador, y Vue-Router solo usa estas dos características (llamando a la interfaz proporcionada por el navegador) para implementar el enrutamiento front-end.
3. Escenarios de uso
En escenarios generales, se pueden usar tanto el hash como el historial, a menos que le importe más la apariencia, el símbolo # mezclado en la URL no se ve bonito.
Si no desea un hash muy feo, podemos usar el modo de historial de enrutamiento, que hace un uso completo de la API history.pushState para completar el
salto de URL sin recargar la página. —— Sitio web oficial de Vue-router.
Además, de acuerdo con la introducción de Mozilla Develop Network, llamar a history.pushState () tiene las siguientes ventajas sobre la modificación directa del hash:
- La nueva URL establecida por pushState () puede ser cualquier URL que sea la misma que la URL actual; y el hash solo puede modificar
la parte después de # , por lo que solo se puede establecer la URL del mismo documento que la URL actual; - La nueva URL establecida por pushState () puede ser exactamente la misma que la URL actual, que también agregará el registro a la pila; y
el nuevo valor establecido por el hash debe ser diferente del original para activar la acción de agregar el registro. a la pila; - pushState () puede agregar cualquier tipo de datos al registro a través del parámetro stateObject, mientras que hash solo puede agregar cadenas cortas;
- pushState () también puede establecer el atributo de título para su uso posterior.
Por supuesto, la historia no es buena en todo. Aunque SPA funciona bien en el navegador, cuando realmente quiere iniciar una solicitud HTTP al backend a través de una URL, surge la diferencia entre los dos. Especialmente cuando el usuario ingresa manualmente la URL y presiona Enter, o actualiza (reinicia) el navegador.
En el modo hash, solo el contenido antes del símbolo hash se incluirá en la solicitud, como http://www.abc.com, por lo que para el backend, incluso si el enrutamiento no está completamente cubierto, no devolverá el error 404 .
- En el modo de historial, la URL de front-end debe ser coherente con la solicitud real a la URL de back-end, como
http://www.abc.com/book/id. Si el backend carece de procesamiento de enrutamiento para / book / id, se devolverá un error 404. - El
sitio web oficial de Vue-Router lo describe así: "Sin embargo, este modo debe jugarse bien y requiere soporte de configuración en segundo plano ... Por lo tanto, debe agregar un recurso candidato que cubra todas las situaciones en el lado del servidor: si la URL no
se han encontrado recursos estáticos, debe devolver la misma página index.html, que es la página de su aplicación depende ".