Vue-Router路由模式大起底：Hash和History有何玄机？

2023-03-23 20:34:38

Vue-Router 路由模式：深入解析

简介

在单页面应用程序 (SPA) 中，路由器扮演着至关重要的角色，负责管理页面之间的跳转和状态管理。Vue.js 官方提供的 Vue-Router 路由管理器提供了两种路由模式：Hash 模式和 History 模式。本文将深入解析这两种模式，探讨它们的优缺点，适用场景，以及在 Vue 项目中设置它们的方法。

Hash 模式

Hash 模式是最常见的路由模式。它在 URL 中使用 "#" 符号来标识锚点。这种模式具有出色的兼容性，支持所有浏览器，并且在刷新页面时不会重新加载整个页面，从而提高了加载速度。

优点：

兼容性好
速度快

缺点：

URL 格式不美观
SEO 不友好

History 模式

History 模式是 HTML5 引入的新路由模式。它使用 URL 中的路径来标识页面。这种模式更加简洁美观，并且在 SEO 方面更有优势。

优点：

URL 格式简洁
SEO 友好

缺点：

兼容性较差
刷新页面时会重新加载整个页面

Hash 模式和 History 模式的对比

特性	Hash 模式	History 模式
URL 格式	`https://example.com/#/home`	`https://example.com/home`
兼容性	支持所有浏览器	仅支持 HTML5 浏览器
页面刷新	不重新加载页面	重新加载整个页面
SEO 友好性	不友好	友好

适用场景

如果您的项目需要兼容所有浏览器，并且对 SEO 没有要求，那么 Hash 模式是一个不错的选择。
如果您的项目需要良好的 SEO 效果，并且兼容 HTML5 浏览器，那么 History 模式是您的最佳选择。

在 Vue 中设置路由模式

在 Vue 项目中，可以通过以下方式设置路由模式：

// 创建 VueRouter 实例
const router = new VueRouter({
  mode: 'hash', // 或者 'history'
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

// 将路由器实例挂载到 Vue 根实例
const app = new Vue({
  router
}).$mount('#app')