优化vue-router路由管理

时间: 2019-09-08阅读: 21标签: 路由

前言

本文启发自实际项目中,随着项目不断增长,页面越来越多,不得不把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-one、page-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文件将会自动将其关联。


思考

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


链接: http://www.fly63.com/article/detial/5802

实现一个前端路由,如何实现浏览器的前进与后退?

如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ?首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录:没有提供监听前进后退的事件。

Flutter 如何在切换页面的时候,把参数传到下一个页面?

讲解Flutter 路由传递,这是一个大的概述图。当 app 的页面变多的时候,就需要考虑页面传值的问题,在第一个页面如何把数据传递到 另外一个页面?最最基本的方法是在打开新页面,传递参数过去。但当 app 变得很大或者功能变多

Vue路由守卫之路由独享守卫

路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合)

Vue路由实现页面跳转的两种方式(router-link和JS)

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用:通过 <router-link> 实现;<router-link> 组件用于设置一个导航链接,切换不同 HTML 内容

nginx 适配react-router browserRoute 路由问题

本文环境比较复杂,首先两层nginx转发,并且访问路径也不是根路径。加上对nginx一知半解,各路搜索一看,全程懵逼。最终没有一个能用的。最后还是靠同事帮助,文档大法结束加班。本文知识点:location优先级

使用 webpack 插件自动生成 vue 路由文件

一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间。

理解Web路由

在Web开发过程中,经常会遇到『路由』的概念。那么,到底什么是路由?简单来说,路由就是URL到函数的映射。route就是一条路由,它将一个URL路径和一个函数进行映射

Flutter开发之导航与路由管理

所谓路由管理,就是管理页面之间如何跳转,也被称为导航管理。这和原生开发类似,无论是Android还是iOS,导航管理都是通过维护一个路由栈来实现的,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作

Vue 动态添加路由及生成菜单

写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单。为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的。

从了解Hash和Html5 History 到简单实现路由

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),在页面中的hash有多种功能意义:浏览器读取到hash之后自动滚动到该对应元素所在位置的可视区域内

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全