一步步优化vue-router路由管理

前言

本文启发自实际项目中,随着项目不断增长,页面越来越多,不得不把vue-router的路由管理化繁为简逐渐自动化的一个过程,希望能引发大家的思考;

顺理成章的路由管理方式

在一个Vue + Vue-Router的单页应用中,我们一般会在一个js文件中统一管理我们的页面,具体如下:

const routes = [{
  path: '/page-one/index',
  component: () => import('./pages/page-one/index'),
  meta: {
    title: 'page-one-index'
  }
}, {
  path: '/page-one/sub-page',
  component: () => import('./pages/page-one/sub-page'),
  meta: {
    title: 'page-one-sub-page'
  }
}, {
  path: '/page-two/index',
  component: () => import('./pages/page-two/index'),
  meta: {
    title: 'page-two-index'
  }
}, {
  // 其他页面...
}];

export default new VueRouter({ routes });

这种方式的优点就是能集中化的管理页面;而缺点也是明显的,随着项目规模越来越大,单个js会管理大量的页面路由,维护起来有一定的困难。

拆分与聚合

既然大量的页面路由在单个js文件维护存在困难,那不如就路由根据业务进行拆分管理,每个业务对应的页面由其对应的路由文件来管理,然后在总的路由文件中再聚合各业务的路由文件

// page-one-router.js
// page-one管理的路由文件
export default [{
  path: '/page-one/index',
  component: () => import('./index'),
  meta: {
    title: 'page-one-index'
  }
}, {
  path: '/page-one/sub-page',
  component: () => import('./sub-page'),
  meta: {
    title: 'page-one-sub-page'
  }
}];
// page-two-routes.js
// page-two管理的路由文件
export default [{
  path: '/page-two/index',
  component: () => import('./index'),
  meta: {
    title: 'page-two-index'
  }
}]

上面的page-onepage-two两个模块是拆分出来的路由管理文件,下面的js是聚合这两个模块的总路由管理文件。

// root-router.js
// 总路由管理文件
let routes = [];

[
  'page-one',
  'page-two'
].forEach(m => routes = routes.concat(require(`./pages/${m}/router`).default));

export default new VueRouter({ routes });

到这里,这个优化看起来已经好多了,有新增的业务只需要新增业务对应的router.js文件,然后再将业务注册到root-router.js即可。但是我们能不能再优化呢,当前方案再每次新增的时候,都需要改两个地方;答案是肯定的,我们还可以优化。

自动化方案

Webpack4中提供了require.context()以通过正则匹配引入对应的模块

require.context(directory, useSubdirectories = false, regExp = /^\.\//);
  • directory:检索的目录
  • useSubdirectories:是否检索子目录
  • regExp:匹配文件的正则表达式

具体的介绍可以参考官方文档所以我们可以修改`root-router.js``路由加载的逻辑如下:

let routes = [];

// auto import route.js
(modules => modules.keys().forEach((key) => {
  routes = routes.concat(modules(key).default);
}))(require.context('./pages/', true, /router\.js$/));

export default new VueRouter({ routes });

当有新的页面添加时,只需要在其子目录中添加router.js文件,root-router.js文件将会自动将其关联。

思考

虽然这只是一个小小的优化,但是在优化过程中体现了工程化的一个目的,就是尽量减少人工操作,降低维护成本。

原文链接:segmentfault.com

上一篇:impress
下一篇:importer

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    2 个月前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问🔗...

    3 个月前
  • 🎸 一篇文章搞懂前后端路由及前端路由的实现

    一、WEB 开发中的路由(以下简称路由)是指什么 路由简单来说根据网页 url 的改变来转发给对应控制器处理的应用程序,控制器就是我们俗称的Controller,一般是一个函数,所以路由也可以看作是u...

    1 个月前
  • 🍊仿Element自定义Vue组件库

    (/public/upload/643b972fb2ebd2e6272ff8b16712b205) 前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。

    1 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    4 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 (/public/upload/e221e3db24c3f24a41062b6e4e389df8) 2、出现问题的代码点 (/publ...

    3 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前

官方社区

扫码加入 JavaScript 社区