Vue Router 的两种模式：`history` 模式与 `hash` 模式

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_ZEEKLOG博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • 一、`hash` 模式
    • （一）定义
    • （二）实现原理
    • （三）优点
    • （四）缺点
    • （五）适用场景
  • 二、`history` 模式
    • （一）定义
    • （二）实现原理
    • （三）优点
    • （四）缺点
    • （五）适用场景
  • 三、如何选择路由模式
    • （一）选择 `hash` 模式
    • （二）选择 `history` 模式
  • 四、如何配置 `history` 模式
    • （一）配置 Vue Router
    • （二）配置后端服务器
      • 1\. Nginx
      • 2\. Apache
      • 3\. Node.js (Express)
  • 五、总结

Vue Router 提供了两种路由模式：hash 模式和 history 模式。这两种模式在 URL 的表现形式、浏览器兼容性、SEO 优化以及后端配置等方面存在显著差异。本文将详细介绍这两种模式的区别，并探讨它们的适用场景。

一、hash 模式

（一）定义

hash 模式是 Vue Router 的默认模式。在这种模式下，URL 中会包含一个 #（哈希符号），例如 http://example.com/#/about。hash 模式通过监听 URL 中的哈希变化来实现页面的切换，而不会发送请求到服务器。

（二）实现原理

hash 模式利用了浏览器的 hashchange 事件。当 URL 中的哈希部分（# 后面的部分）发生变化时，浏览器会触发 hashchange 事件，Vue Router 会监听这个事件来更新页面内容。

（三）优点

1. 无需服务器配置：hash 模式不需要后端服务器的支持，因为 URL 中的哈希部分不会发送到服务器。
2. 兼容性好：hash 模式兼容所有现代浏览器，甚至包括一些较旧的浏览器。
3. 简单易用：默认模式，无需额外配置。

（四）缺点

1. URL 不够美观：URL 中包含 #，可能会影响用户体验。
2. SEO 优化困难：搜索引擎可能不会索引哈希部分的内容，对 SEO 不友好。
3. 无法直接访问：用户直接输入 URL 时，可能会跳过哈希部分，导致页面加载不正确。

（五）适用场景

hash 模式适用于以下场景：

• 小型项目：不需要复杂的 URL 结构，对 SEO 要求不高的项目。
• 无后端支持：前端项目没有后端服务器支持，或者不想配置服务器。
• 快速开发：需要快速搭建原型或简单应用，无需担心 URL 格式。

二、history 模式

（一）定义

history 模式通过浏览器的 history API（如 pushState 和 replaceState）来实现 URL 的切换，而不会在 URL 中包含 #。例如，http://example.com/about。

（二）实现原理

history 模式利用了浏览器的 history API 来监听 URL 的变化。当用户点击链接或使用编程式导航时，Vue Router 会调用 pushState 或 replaceState 来更新 URL，而不会重新加载页面。

（三）优点

1. URL 美观：URL 更加简洁，没有 #，更符合传统的 Web 应用 URL 格式。
2. SEO 友好：搜索引擎可以更好地索引页面内容，对 SEO 更友好。
3. 用户体验更好：用户可以直接访问任意 URL，而不会出现 404 错误。

（四）缺点

1. 需要服务器配置：history 模式需要后端服务器的支持，以确保所有路由都能正确返回应用的入口文件（如 index.html）。
2. 配置复杂：需要额外配置服务器，增加了开发和部署的复杂性。
3. 兼容性稍差：虽然现代浏览器都支持 history API，但在一些较旧的浏览器中可能需要额外的 polyfill。

（五）适用场景

history 模式适用于以下场景：

• 大型项目：需要复杂的 URL 结构，对 SEO 要求较高的项目。
• 有后端支持：项目有后端服务器支持，可以配置路由转发。
• 用户体验要求高：需要更美观的 URL 和更好的用户体验。

三、如何选择路由模式

选择 hash 模式还是 history 模式，取决于项目的具体需求和开发环境。以下是一些选择建议：

（一）选择 hash 模式

• 快速开发：需要快速搭建原型或简单应用，无需担心 URL 格式。
• 无后端支持：前端项目没有后端服务器支持，或者不想配置服务器。
• 兼容性要求高：需要支持较旧的浏览器。

（二）选择 history 模式

• 大型项目：需要复杂的 URL 结构，对 SEO 要求较高的项目。
• 有后端支持：项目有后端服务器支持，可以配置路由转发。
• 用户体验要求高：需要更美观的 URL 和更好的用户体验。

四、如何配置 history 模式

如果选择使用 history 模式，需要在 Vue Router 中进行配置，并确保后端服务器支持路由转发。

（一）配置 Vue Router

在 Vue Router 中，可以通过 createWebHistory 方法启用 history 模式。

// router/index.jsimport{ createRouter, createWebHistory }from'vue-router';import Home from'../views/Home.vue';import About from'../views/About.vue';const routes =[{path:'/',name:'Home',component: Home },{path:'/about',name:'About',component: About }];const router =createRouter({history:createWebHistory(), routes });exportdefault router;

（二）配置后端服务器

history 模式需要后端服务器支持路由转发。以下是一些常见服务器的配置示例：

1. Nginx

server { location / { try_files $uri $uri/ /index.html; } } 

2. Apache

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> 

3. Node.js (Express)

const express =require('express');const path =require('path');const app =express(); app.use(express.static(path.join(__dirname,'dist'))); app.get('*',(req, res)=>{ res.sendFile(path.join(__dirname,'dist','index.html'));}); app.listen(8080,()=>{ console.log('Server running on port 8080');});

五、总结

Vue Router 的 hash 模式和 history 模式各有优缺点，适用于不同的场景：

• hash 模式：
  • 优点：无需服务器配置，兼容性好，简单易用。
  • 缺点：URL 不够美观，SEO 优化困难，无法直接访问。
  • 适用场景：小型项目、无后端支持、快速开发。
• history 模式：
  • 优点：URL 美观，SEO 友好，用户体验更好。
  • 缺点：需要服务器配置，配置复杂，兼容性稍差。
  • 适用场景：大型项目、有后端支持、用户体验要求高。

在实际开发中，可以根据项目的具体需求和开发环境选择合适的路由模式。如果项目对 SEO 和用户体验要求较高，并且有后端支持，建议使用 history 模式；如果项目是小型项目，或者没有后端支持，建议使用默认的 hash 模式。

希望本文能帮助你更好地理解 Vue Router 的两种模式，并在实际开发中做出合理的选择。