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 非浏览器环境

四、小杨的实战建议

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

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

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

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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

相关推荐
贵沫末12 分钟前
React——基础
前端·react.js·前端框架
aklry24 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9331 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子32 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982432 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug35 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo35 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan35 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js