Vue Router两种路由模式剖析：Hash和History

2024-02-20 12:05:37

Vue Router：两种路由模式剖析

在开发单页应用时，Vue Router 是一个不可或缺的工具。它为我们提供了管理路由、导航和监听的功能。Vue Router 提供了两种路由模式：Hash 模式和 History 模式。让我们深入探讨一下这两种模式，包括它们的原理、优缺点和适用场景。

实现原理

Hash 模式

Hash 模式通过在 URL 中添加井号（#）符号及其后的锚点（Anchor）来实现路由。例如，访问 /home 路由时，URL 会变成 http://example.com/#/home。

Hash 模式利用 window.location.hash 属性来工作。当在浏览器中输入 URL 并按回车键时，浏览器会将井号（#）符号及其后的部分存储在该属性中。Vue Router 监视此属性的变化，并根据检测到的变化触发路由导航。

History 模式

History 模式使用 HTML5 History API 来管理路由。与 Hash 模式不同，它不会在 URL 中添加井号（#）符号。访问 /home 路由时，URL 会变成 http://example.com/home。

History 模式依赖于 pushState() 和 replaceState() 方法。当在浏览器中输入 URL 时，浏览器会将路径部分存储在 window.location.pathname 属性中，并触发 popstate 事件。Vue Router 监听此事件，并根据检测到的事件触发路由导航。

优缺点对比

特性	Hash 模式	History 模式
URL 中包含井号（#）符号	是	否
服务器端支持	不需要	需要
浏览器兼容性	良好	较差
SEO 友好性	差	好
URL 美观性	差	好

适用场景

Hash 模式

Hash 模式适用于以下场景：

支持较旧浏览器的应用。
服务器端渲染的应用。
不需要 SEO 的应用。

History 模式

History 模式适用于以下场景：

支持 HTML5 History API 的浏览器的应用。
客户端渲染的应用。
需要 SEO 的应用。

如何选择路由模式

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

浏览器兼容性： 考虑支持的浏览器版本。
服务器端渲染： Hash 模式适用于服务器端渲染的应用。
SEO： History 模式对 SEO 更友好。
URL 美观性： History 模式提供更美观的 URL。

代码示例

Hash 模式

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

Vue.use(VueRouter)

const Home = { template: '<h1>Home</h1>' }
const About = { template: '<h1>About</h1>' }

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

new Vue({
  router
}).$mount('#app')

History 模式

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

Vue.use(VueRouter)

const Home = { template: '<h1>Home</h1>' }
const About = { template: '<h1>About</h1>' }

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

new Vue({
  router
}).$mount('#app')