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 会被显示到页面中。