优化vue-router路由管理

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

前言

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


思考

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


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

vue.router中replace需要返回两次问题及解决方案

现有三个页面a , b , c , 递进关系,a页面router.push跳转至b,b再router.push跳转至c,c使用$router.replace()回到b,然后点击b页面的返回键,需要点击两次才能回到a页面

vue-router 导航守卫中 next 控制实现

使用 vue-router 的导航守卫钩子函数,某些钩子函数可以让开发者根据业务逻辑,控制是否进行下一步,或者进入到指定的路由。

vue 路由模式hash和history的区别

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回index.html文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

JS是如何实现前端路由的 JS实现原生路由

路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时

vue 路由及按钮权限控制 思路总结

前端路由是全部都由后端返回,还是后端返回对应角色下的权限,然后前端通过遍历的方式来修改当前路由呢?第一种后台返回路由,第二种后台返回权限。

React Router拦截器(钩子)、静态路由、route-view 实现

React Router 再 v3 版本之前 是有 onEnter 钩子函数的,也支持静态路由配置;,但到了 v4 版本后钩子函数被移除,官方说是为了将此提供给开发者,由开发者自由发挥。既然如此我们就只能自己实现

前端路由(history+hash)

在传统网站开发中,我们一般使用比如asp、php、jsp等技术进行开发,开发完成后统一部署在服务器上,我们访问时,会在浏览器中发送带有\\\'.asp\\\',\\\'.php\\\',\\\'.jsp\\\'等后缀路径的url请求,服务器会根据对应的路由映射表

Flutter路由导航

我们通常会用屏(Screen)来称呼一个页面(Page),一个完整的App应该是有多个Page组成的。通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换,除了上面这种管理页面的方式,我们还需要实现其它功能的页面跳转

小程序多种路由跳转的区别

从Anjular转换到微信小程序,从功能丰富,便捷操作的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理作用吧,从一开始就觉得它不好用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手

Vue 嵌套路由、路由守卫

嵌套路由挺常用的,比如导航栏有首页、文章、想法、留言4个模块,我们以嵌套路由的形式集成这些模块,在导航栏中点击对应的条目,就会路由到对应的页面(下方显示对应的页面),和html的<iframe>效果差不多。

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

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

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