Dos modos de trabajo de enrutamiento Vue front-end

1. La importancia del enrutamiento front-end

前端路由主要应用在spa项目中。
核心---在无刷新(不向后端发送请求)的情况下,可以根据不同url更改视图。

En la aplicación de una sola página del front-end web SPA (aplicación de una sola página), el enrutamiento describe la relación de asignación entre la URL y la interfaz de usuario. Esta asignación es unidireccional, es decir, los cambios en la URL provocan actualizaciones de la interfaz de usuario (no es necesario actualizar la página). . En la actualidad, el enrutamiento de front-end incluye principalmente dos tipos de hash e historial. Lo que tienen en común es que están cambiando la URL de la página del sitio web actual, monitoreando los cambios en la ruta de la URL y haciendo coincidir las reglas de enrutamiento para mostrar el contenido correspondiente que se mostrará (no enviará una solicitud para cambiar la página como la fondo).

1. enrutamiento hash

Hay un número #. Cuando cambia el valor hash, la función hashchange se usa para monitorear el cambio del valor de enrutamiento detrás del hash#. Cambia la información de la página para que se muestre según diferentes valores hash (es decir, diferentes rutas).

比如这个 URL:http://www.abc.com/#/hello,hashURL模式中#后面的就是hash值,当hash值发生变化时,
可以通过hashChange事件监听到url的变化,从而进行页面跳转。每一次改变#后的部分,都会在浏览器的访问历史中
增加一个记录,使用“后退”按钮,就可以回到上一个位置。

注意:无论hash值如何变化,服务器接收到的HTTP请求中url永远是#前面的http://www.abc.com;对后端完全没有
影响,因此改变 hash 不会重新加载页面。

2. Historial de enrutamiento

Escuchar los cambios de ruta en la URL requiere el soporte tanto del cliente como del servidor. Debido a que la solicitud no se reenviará al servidor cuando cambie la ruta, pero cuando se actualice la página, la solicitud se reenviará al servidor.Si el servidor no está configurado, se mostrará 404. A través del modo window.history del
historial de la página de registro del navegador

HTML5新推出的功能。主要使用history.pushState() 和history.replaceState() 方法。同时还有一个新的
popState事件(当用户做出浏览器动作,例如点击“前进”、“后退”按钮时,触发popState事件),通过监听这一事件,
配合上面这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,提供了对当前浏览
器进行修改的功能,实现改变了当前的 URL,但浏览器不会立即向后端发送请求。

注意:history模式更改url不会向后端发送请求,但是如果点击刷新,就会向后端发送请求。

2. La diferencia entre los dos modos

1.history模式可以通过api设置任意的同源url,hash模式只可以更改#后的内容;
2.history模式可以通过api添加任意类型的数据到历史记录中,hash模式只能更改hash值,也就是字符串;
3.history模式设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;
  hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;
4.hash模式无需后端配置,且兼容性好。
  history模式在用户手动输入url地址或刷新页面时会发起url请求,前端的 URL 必须和实际向后端发起请求的 URL 一
  致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。后端需要配置
  index.html页面用于匹配不到静态资源的时候,同时在前端处理4045.history模式可额外设置 title 属性供后续使用。

3. Escenarios de uso

En escenarios generales, tanto el hash como el historial están bien, a menos que le importe más la apariencia, el símbolo # mezclado en la URL no se ve muy hermoso.
Si no quiere un hash feo, podemos usar el modo de historial de enrutamiento, que hace un uso completo de la API history.pushState para completar los saltos de URL sin recargar la página.

Supongo que te gusta

Origin blog.csdn.net/m0_66504310/article/details/129261366
Recomendado
Clasificación