大家好,我是小杨,一个摸爬滚打了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
最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!