Vue路由玩法大揭秘：三种路由模式你Pick谁？

大家好，我是小杨，一个摸爬滚打了6年的前端老司机。今天咱们来聊聊Vue路由那些事儿，保证让你看完直呼"原来如此"！

一、路由是个啥？

简单来说，路由就是根据不同的URL显示不同的内容。就像你去餐厅点菜，不同的菜单编号对应不同的菜品，路由就是那个"菜单编号"到"菜品"的映射关系。

在Vue中，我们通过vue-router来实现这个功能。先来瞅瞅怎么安装：

bash 复制代码

npm install vue-router

然后在项目中引入：

javascript 复制代码

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

Vue.use(VueRouter)

二、Vue路由的三种玩法

1. 哈希模式（Hash Mode） - 老司机的标配

javascript 复制代码

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

特点：

URL中有个#号，比如http://example.com/#/home
改变#后面的内容不会触发页面刷新
兼容性好，连IE8都能支持

我的实战经验：

javascript 复制代码

// 在项目中这样用
{
  path: '/my-profile',
  component: () => import('@/views/MyProfile.vue')
}

2. 历史模式（History Mode） - 现代派的优雅

javascript 复制代码

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

特点：

URL干净漂亮，比如http://example.com/home
需要后端配合，不然刷新会404
利用了HTML5的History API

我踩过的坑：

javascript 复制代码

// 记得配置404页面
{
  path: '*',
  component: () => import('@/views/NotFound.vue')
}

3. 抽象模式（Abstract Mode） - 小众但实用

javascript 复制代码

const router = new VueRouter({
  mode: 'abstract',
  routes: [...]
})

特点：

主要用于非浏览器环境（如Node.js、Electron）
不依赖浏览器API
URL不会显示在地址栏

我在Electron项目中的应用：

javascript 复制代码

// 适合桌面应用
{
  path: '/local-file',
  component: () => import('@/views/LocalFile.vue')
}

三、如何选择？看这里！

模式	适用场景	是否需要后端配置	SEO友好
hash	兼容性要求高的项目	否	差
history	现代Web应用	是	好
abstract	非浏览器环境	否	无

四、小杨的实战建议

普通项目：直接用hash模式，省心
企业级项目：上history模式，记得让后端小伙伴配置下
Electron/SSR：考虑abstract模式

最后送大家一个路由守卫的小技巧：

javascript 复制代码

router.beforeEach((to, from, next) => {
  if (to.path === '/admin' && !我.isAdmin) {
    next('/login') // 不是管理员？门都没有！
  } else {
    next()
  }
})

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！