Vue Router 实战整理：页面一多，路由设计比跳转本身更重要

2018-10-03

0 阅读

Vue

Vue 单页应用做小的时候，路由通常只是几个页面切换，没什么难度。可页面一多，路由就不再只是“从 A 跳到 B”，它会直接影响项目结构。

列表页和详情页怎么组织，后台模块怎么拆，权限页放在哪一层，布局组件怎么复用，这些事最后都会回到路由设计上。

路由不是只管跳转

很多人刚开始学 Vue Router，会把重点放在：

router-link
this.$router.push
动态参数

这些当然要会，但真到项目里，更关键的是路由和页面结构是否一致。

如果路由本身没有层级感，页面代码通常也会跟着乱。

嵌套路由很适合后台布局

后台管理系统里最常见的需求之一，就是外层菜单和头部固定，中间内容区切换。

这种场景下，嵌套路由会比平铺路由更自然。

1const routes = [
2  {
3    path: '/admin',
4    component: AdminLayout,
5    children: [
6      { path: 'users', component: UserList },
7      { path: 'orders', component: OrderList }
8    ]
9  }
10];

这样布局只渲染一次，内部页面跟着切换，结构也更清楚。

动态路由别只想着参数怎么取

动态路由通常会写成：

1{ path: '/article/:id', component: ArticleDetail }

很多人学到这里就停了，关注点只剩“怎么拿到 id”。但真正更值得想的是：

详情页是否真的适合放在这个层级
列表和详情是不是同一个业务模块
返回路径和面包屑是否自然

说白了，参数不是难点，页面关系才是。

路由命名会在后期救你很多次

很多项目前期直接靠路径跳转，能跑就行。可等路径复杂了、参数多了、结构调整了，就会开始感受到命名路由的好处。

1{
2  path: '/article/:id',
3  name: 'article-detail',
4  component: ArticleDetail
5}

后面跳转时：

1this.$router.push({ name: 'article-detail', params: { id: 1 } });

比硬写路径更稳，也更便于统一维护。

懒加载值得尽早接入

页面一多以后，路由懒加载几乎是默认应该考虑的事情。

因为单页应用最容易出现的问题之一，就是首屏把所有页面代码一起打进来。

1const UserList = () => import('./views/UserList.vue');

这不是锦上添花，而是项目变大后的基本优化。

写在最后

Vue Router 学起来不难，真正难的是把它和页面结构一起设计清楚。

页面少时随便写都能跑，页面多了以后，路由就是项目骨架。骨架搭得清楚，后面很多代码都会跟着轻下来。