vue路由的两种模式 hash与history

2023-06-27 09:21:37 浏览数 (1)

vue路由是什么？

Vue 路由是 Vue.js 框架提供的一种机制，用于实现单页面应用（Single-Page Application，简称 SPA）中的前端路由功能。它允许通过定义不同的路由路径和对应的组件，来管理应用程序中不同页面或视图的展示和切换。

Vue 路由使用了浏览器的 History API 或 hash（#）来实现路由导航。通过配置路由映射关系，将 URL 的不同路径与对应的 Vue 组件关联起来。当用户点击链接或执行特定操作时，Vue 路由可以动态地加载所需的组件并更新页面内容，而无需重新加载整个页面。这样，用户可以在单页应用中快速、平滑地切换页面，获得更好的用户体验。

在 Vue 路由中，可以定义多个路由，并指定每个路由对应的路径和组件。可以通过编程式导航或声明式导航的方式，根据具体的需求，在不同的组件之间切换路由。Vue 路由还支持参数传递、路由守卫、嵌套路由等功能，以满足复杂的应用场景。

使用 Vue 路由，可以轻松构建交互丰富、界面流畅的单页面应用，有效管理页面之间的导航和状态切换。

Vue的路由有两种模式：Hash 模式和 History 模式。

Hash 模式

在这种模式下，URL 中的路由路径会以 # 符号作为分隔符。例如，http://example.com/#/home。

Hash 模式的好处是它不会触发页面的刷新，所有的路由都在客户端进行处理，并且兼容性较好，可以在不同的浏览器和服务器配置中使用。

Vue 路由的 Hash 模式是通过修改 URL 中的哈希（hash）部分来实现的。在 Hash 模式下，URL 中的路由路径会以 # 符号作为分隔符。例如，http://example.com/#/home。

当用户切换路由时，Vue 路由会监听 URL 的 hashchange 事件，一旦 URL 的哈希部分发生变化，它就会根据新的哈希值找到对应的路由配置，并动态地加载所需的组件并更新页面内容，形成页面无刷新的效果。

所以，在使用 Hash 模式时，每次切换路由都会修改 URL 的哈希部分，而不会改变实际的 URL 路径，因此刷新页面或直接访问某个子路由时，需要保证服务器能正确响应前端路由请求，返回正确的页面内容。

Hash具体的原理如下：
  1. Vue 路由会创建一个全局的监听器，监听浏览器的 hashchange 事件。
  2. 当用户点击链接或执行特定操作时，Vue 路由会将对应的路由路径解析出来，并将该路径的哈希部分设置为当前 URL 的哈希部分。例如，点击了一个链接，将路由路径 '/home' 解析出来，然后将 'home' 设置为 URL 的哈希部分，即 http://example.com/#/home。
  3. 浏览器会自动触发 hashchange 事件，Vue 路由监听到事件后，根据新的哈希值找到对应的路由配置，并根据配置信息动态加载对应的组件，更新页面内容，完成路由导航的过程。
Hash 模式的好处
  • 不会触发页面的刷新
  • 所有的路由都在客户端进行处理
  • 并且兼容性较好
  • 可以在不同的浏览器和服务器配置中使用缺点但同时，URL 中的 # 符号可能对SEO不太友好，并且在 URL 中出现了冗余信息。

History 模式

在这种模式下，URL 中的路由路径没有 # 符号，看起来更加美观。例如http://example.com/home。

History 模式依赖 HTML5 的 History API，它通过修改浏览器的历史记录来实现前端路由的切换。与 Hash 模式相比，History 模式的 URL 更加友好，但需要服务器配置支持，确保在每个路由都返回正确的页面，即使在刷新页面或直接访问某个子路由时也能正常工作。

在 Vue 中，默认采用的是 Hash 模式，你可以通过配置 mode: 'history' 来启用 History 模式，同时需要在服务器端进行相应的配置，以确保在各种情况下都能正确响应前端路由请求。

总结一下，Hash 模式使用 # 符号，不会触发页面刷新，兼容性较好；History 模式去除了 # 符号，需要服务器配置支持，URL 更加友好。

实现 History 模式的原理如下：
  1. 当用户访问一个 Vue 路由应用时，服务器需要配置一个默认页面（比如 index.html），用于处理与前端路由相关的请求。
  2. 当用户切换路由时，Vue 路由会调用浏览器的 History API，通过 pushState 或 replaceState 方法修改当前的历史记录，并将新的路径添加到浏览器的历史栈中。
  3. Vue 路由还会监听 popstate 事件，当用户点击浏览器的前进或后退按钮时，会触发该事件，Vue 路由会根据新的路径找到对应的路由配置，并动态地加载所需的组件并更新页面内容，完成路由导航的过程。

在 History 模式下，服务器需要正确配置，确保在直接访问某个子路由时返回应用的默认页面（比如 index.html），这样前端路由才能接管路由请求并正确展示对应的页面内容。

History 模式的好处

History 模式相比于 Hash 模式更加符合传统的 URL 形式，没有冗余的 # 符号，对搜索引擎更友好。

缺点

但需要注意的是，在使用 History 模式时，服务器需要正确配置以处理前端路由请求，并且要注意兼容性，因为一些旧版本的浏览器可能不支持 History API。如果在不支持的情况下，Vue 路由会自动降级到 Hash 模式来保证路由功能的正常运行。

vue.js

0 人点赞