Vue的路由实现:hash模式 和 history模式原理

发布时间:2024年01月17日
  1. Hash 模式: 在 hash 模式下,URL 中的路由信息会以 # 符号后的内容表示,例如 http://example.com/#/home。当 URL 中的 hash 发生变化时,浏览器不会向服务器发送请求,而是通过监听 hashchange 事件来响应 URL 的变化,并根据新的 hash 值进行路由的切换。

    Vue Router 默认使用 hash 模式。它通过在页面中插入一个隐藏的 iframe,使用 onhashchange 事件监听 URL 的变化。当路由切换时,Vue Router 会根据新的 hash 值匹配对应的路由组件,并将组件渲染到页面中。

    优点:hash 模式在所有浏览器中都能良好地工作,不需要额外的服务器配置。

    缺点:URL 中的 # 符号可能会被视为页面内的锚点,对搜索引擎的友好度较低。

  2. History 模式: 在 history 模式下,URL 中的路由信息不再使用 # 符号,而是直接使用正常的 URL 地址,例如 http://example.com/home。当 URL 发生变化时,浏览器会向服务器发送请求,服务器需要配置来确保对任何 URL 请求都返回相同的 HTML 页面,然后由前端路由来处理 URL 的变化。

    在使用 history 模式时,需要在服务器配置中添加一个规则,将所有的 URL 请求重定向到前端的入口页面,例如 index.html。这样,在刷新页面或直接访问某个路由时,服务器会返回入口页面,并由前端路由来处理路由的切换。

    在 Vue Router 中启用 history 模式,需要通过服务器配置来确保所有的 URL 请求都返回入口页面。这可以在 Vue CLI 的配置文件中进行设置,或者通过在服务器上添加相应的规则来实现。

    优点:URL 更加友好,没有 # 符号,更符合正常的 URL 地址格式。

    缺点:需要额外的服务器配置来确保所有的 URL 请求都返回入口页面,否则会出现 404 错误。

文章来源:https://blog.csdn.net/m0_65346405/article/details/135620724
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。