从 hash 到 history：vue-router 踩坑指南

前端

2023-11-25 11:06:04

前言

vue-router 是一个强大的前端路由库，它可以帮助您轻松构建单页应用。vue-router 默认使用 hash 模式，即在 URL 的末尾添加一个 # 符号来模拟一个完整的 URL，这样当 URL 改变时，页面不会重新加载。

但是，hash 模式有一个缺点，那就是 URL 非常丑陋，而且不利于 SEO。因此，如果您想让您的单页应用具有更好的用户体验和 SEO 性能，那么您需要使用 vue-router 的 history 模式。

history 模式简介

vue-router 的 history 模式充分利用了 HTML5 历史记录 API，即 history.pushState 和 history.replaceState 这两个方法，来实现 URL 的重写。

当您使用 history 模式时，URL 将不会包含 # 符号，而是会像一个传统的 URL 一样。例如，如果您访问的是 /home 页面，那么 URL 将会是 www.example.com/home。

开启 history 模式

要开启 vue-router 的 history 模式，您需要在路由配置对象中设置 mode 选项为 'history'。例如：

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

踩坑指南

在使用 vue-router 的 history 模式时，您可能会遇到以下几个常见问题：

404 错误 ：当您访问一个不存在的页面时，您可能会看到 404 错误。这是因为服务器无法找到您请求的页面。要解决这个问题，您需要在服务器上配置一个重写规则，将所有不存在的请求都重定向到 index.html 页面。
后退/前进按钮不工作 ：当您使用 history 模式时，浏览器的后退/前进按钮可能无法正常工作。这是因为 history 模式不使用 hash，因此浏览器无法跟踪页面的历史记录。要解决这个问题，您需要在您的应用程序中手动实现后退/前进功能。
页面闪烁 ：当您使用 history 模式时，您可能会看到页面闪烁。这是因为在页面加载时，浏览器会先加载 index.html 页面，然后才会加载实际的页面。要解决这个问题，您需要在您的应用程序中添加一个加载指示器。

最佳实践

以下是一些使用 vue-router history 模式的最佳实践：

使用服务端渲染 ：服务端渲染可以帮助您消除页面闪烁问题，并提高您的应用程序的 SEO 性能。
使用 pushState 和 replaceState ：pushState 和 replaceState 是 HTML5 历史记录 API 中的两个重要方法，您可以使用它们来实现 URL 的重写。
使用 basename ：basename 选项可以帮助您在您的应用程序的根路径上添加一个前缀。这对于部署应用程序到子目录下非常有用。
使用 scrollBehavior ：scrollBehavior 选项可以帮助您控制页面滚动行为。您可以使用它来实现平滑滚动效果。

总结

vue-router 的 history 模式是一个强大的工具，它可以帮助您构建更具用户体验和 SEO 性能的单页应用。但是，在使用 history 模式时，您需要注意一些常见问题和陷阱。如果您按照本文中的最佳实践进行操作，那么您就可以避免这些问题，并顺利地在您的项目中使用 vue-router 的 history 模式。