#Vue 路由 Hash 模式：揭秘“#”符号的秘密#

2023-10-10 19:30:43

Vue 路由模式：Hash vs History

在构建单页应用程序 (SPA) 时，Vue.js 路由是至关重要的，它允许你在一个页面上切换多个视图，而无需重新加载整个页面。而路由模式决定了 URL 如何变化以及浏览器如何处理这些变化。Vue.js 提供了两种路由模式：Hash 模式和 History 模式。

Hash 模式

Hash 模式是最简单也是最常见的路由模式。它的特点是 URL 中始终包含一个以“#”为前缀的部分，例如：

http://example.com/#/home

这种模式下，浏览器会忽略“#”及其后的部分，因此不会向服务器发送请求。当“#”后的部分发生变化时，浏览器会触发 hashchange 事件，从而触发 Vue.js 路由的更新。

Hash 模式的优点

实现简单，不需要服务器端配置。
兼容性好，支持所有浏览器。
可以使用后退按钮导航。
易于理解和调试。

Hash 模式的缺点

URL 中包含“#”，影响美观。
无法使用 HTML5 History API 的特性，例如 pushState 和 replaceState。
SEO 不友好，因为“#”后的部分不会被搜索引擎抓取。

History 模式

History 模式是 HTML5 引入的新路由模式，它不依赖于 URL 中的哈希标记，而是利用了 HTML5 History API 提供的 pushState 和 replaceState 方法。这种模式下，URL 会随着视图的变化而变化，例如：

http://example.com/home
http://example.com/about

当 URL 发生变化时，浏览器不会向服务器发送请求，而是触发 popstate 事件，从而触发 Vue.js 路由的更新。

History 模式的优点

URL 干净美观，符合 RESTful 设计原则。
可以使用 HTML5 History API 的特性，例如 pushState 和 replaceState。
SEO 友好，因为 URL 中的变化会被搜索引擎抓取。

History 模式的缺点

需要服务器端配置，需要后端支持 404 页面。
兼容性较差，不支持 IE8 及以下浏览器。
使用后退按钮导航时，可能会出现问题。

如何选择合适的路由模式？

在选择路由模式时，需要考虑以下几点：

兼容性： 考虑应用程序需要支持的浏览器。如果需要支持 IE8 及以下浏览器，则需要使用 Hash 模式。
SEO： 考虑应用程序的 SEO 需求。如果需要良好的 SEO 效果，则需要使用 History 模式。
美观： 考虑 URL 的美观性。如果希望 URL 干净美观，则需要使用 History 模式。
易用性： 考虑应用程序的易用性。如果希望应用程序易于使用和调试，则需要使用 Hash 模式。

一般来说，对于大多数应用程序，History 模式是更好的选择。 它具有更干净的 URL、更好的 SEO 效果和更丰富的功能。但是，如果需要支持 IE8 及以下浏览器，或者应用程序的 SEO 需求不高，则可以使用 Hash 模式。

代码示例

Hash 模式

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

History 模式

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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