Vue Router的路由模式

奋斗吧程序媛2025-12-09 13:26

三种路由模式对比
1. Hash模式（默认）

复制代码

mode: 'hash'  // 或不设置
// URL格式：https://example.com/#/home

特点：URL中包含 # 符号

原理：基于 hashchange 事件

兼容性：支持所有浏览器

2. History模式

复制代码

mode: 'history'  // 当前项目使用的模式
// URL格式：https://example.com/home

特点：URL干净，无 # 符号

原理：基于HTML5 History API

兼容性：需要HTML5支持的现代浏览器

3. Abstract模式

复制代码

mode: 'abstract'
// 用于非浏览器环境，如Node.js服务器

History模式的优势

复制代码

// 美观的URL
https://www.baidu.com/goods-management         // ✓ 美观
https://www.baidu.com/#/goods-managemen   // ✗ 有#号
 // SEO友好
// 搜索引擎更容易索引History模式的URL

History模式的配置要求

复制代码

// 前端配置
 const router = new Router({
  mode: 'history',
  routes: [...]
 })

// 后端配置（nginx示例）
 location / {
 try_files $uri $uri/ /index.html;
 }

在项目中的意义

一般企业级应用，使用History模式：

用户体验更好：URL更专业

SEO友好：便于搜索引擎收录

分享友好：分享的链接更简洁