Vue路由模式中的hash和history模式详细介绍

背景知识

在前端开发中，路由是必不可少的一环，能够支持路由的前端框架也因此非常的流行。Vue框架内部也实现了一个基于组件的路由系统——Vue Router。

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。Vue Router 通过定义路由和组件映射关系，使得不同路由的访问可以呈现出不同的页面，而不需要刷新页面。

路由模式

在 Vue Router 中有两种路由模式：hash 和 history。

hash 模式

hash 模式是通过改变 URL 的 hash 值（即在 # 后面的部分）来实现路由的显示。这种方式是基于原生的浏览器锚点跳转的，不会引起页面的重新加载，也不会与后端造成影响。因为 hash 值的变化只会影响到浏览器本身，不会被提交到服务器端。

示例说明

假设当前页面 URL 是 http://localhost:8080，并且有以下路由配置：

const router = new VueRouter({
  routes: [
    { path: '/home', component: HomeComponent },
    { path: '/about', component: AboutComponent }
  ],
  mode: 'hash'
})

当我们点击路由链接访问 /home，则 URL 变为 http://localhost:8080/#/home，浏览器不会刷新，但 HomeComponent 会被显示到页面中。

history 模式

history 模式是通过 HTML5 的 pushState 和 replaceState 方法来改变浏览器地址栏中的 URL，并获取页面内容，使得 URL 发生变化但页面不会重新加载。

这种模式相较于 hash 模式更加符合浏览器的自然行为，并且不会带有 #。

示例说明

继续上面的路由配置，我们只需要将 mode 属性设置为 history：

const router = new VueRouter({
  routes: [
    { path: '/home', component: HomeComponent },
    { path: '/about', component: AboutComponent }
  ],
  mode: 'history'
})

当我们点击路由链接访问 /home，则 URL 变为 http://localhost:8080/home，浏览器不会刷新，但 HomeComponent 会被显示到页面中。

注意事项

history 模式需要服务器端配合

由于 history 模式改变了 URL 结构，因此需要服务器端进行配合，防止出现 404 页面。如使用 Nginx 反向代理时，需要将所有不存在的文件都重定向到 index.html，这样 Vue Router 才能正确地解析路径并显示页面。

hash 模式存在特殊字符编码问题

因为 hash 值会出现特殊字符（如 #、/、?），因此在处理它们时需要进行编码和解码，否则容易出现混淆。

总结

对于选择使用什么路由模式，应该综合考虑前后端配合、SEO 优化等方面的因素。当使用 history 模式时，需要注意服务器端的配合措施。而当使用 hash 模式时，需要在处理特殊字符时进行编码和解码。