个人对vue前端路由文件的优化

事情的由来

前几天同事离职，他的项目就交接到了我手里,当我打开路由文件的时候，看见的是这个

...

由于屏幕不是很大截图只看见了一部分。。
看见这么一堆我的内心是mmp的。。
这个项目千万不要求改的需求，不然费眼。。

不过vue的路由都是这么乱的么？
赶紧翻了下大佬们的git

...
大佬的也是，只不过乱的稍微好看点。。。

因此萌生我优化路由文件的想法

解决办法

路由里大部分都是重复的东西，而且都是一个obj，所以我写了一个函数

/**
 * 简化router文件
 * @param  {[String]} path          定义路由路径
 * @param  {[String]} name          挂在文件路径
 * @param  {[String]} title         页面title
 * @param  {Object} [other={}]    路由其他参数
 * @param  {Array}  [children=[]] 嵌套路由配置
 * @return {Object}               返回router可用obj
 */
function path(path, name, title, other = {}, children = []) {
  return Object.assign({
    path: path,
    name: name,
    meta: {
      title: title,
    },
    component: (resolve) => require(['../pages/' + name + '.vue'], resolve),
    children: children,
  }, other)
}

这样一个每个路由看起来就直观了许多

export default new Router({
  mode: 'history',
  routes: [
    path('/', 'index', '首页',{redirect:'/home/index'}),
    path('/login', 'public/login', '登录'),
  ]
})

当然嵌套路由也是可以的

//嵌套结构页
    path('/home', 'home', '', '', [
      path('index', 'public/home_index', ''),
    ]),

除此之外，还可以拆分出路由根据模块存放，

let page = [];
// 测试页
page.push(
  path('form', 'test/form', '测试'),
  path('table', 'test/table', 'acc'),
);
// 流程管理
page.push(
  path('form', 'process/list', ''),
);

export default new Router({
  mode: 'history',
  routes: [
    //嵌套结构页
    path('/home', 'home', '', '', [
      path('index', 'public/home_index', ''), // 上下结构
      path('aside', 'public/aside', '', '', page), // 上左右结构
    ]),
  ]
})

随着项目的扩大，也可以用多个文件管理路由。
虽然这个办法没啥技术含量，但是对我来说确实把路由文件变得直观了许多。
希望能帮到大家，最后是demo的整个文件

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

/**
 * 简化router文件
 * @param  {[String]} path          定义路由路径
 * @param  {[String]} name          挂在文件路径
 * @param  {[String]} title         页面title
 * @param  {Object} [other={}]    路由其他参数
 * @param  {Array}  [children=[]] 嵌套路由配置
 * @return {Object}               返回router可用obj
 */
function path(path, name, title, other = {}, children = []) {
  return Object.assign({
    path: path,
    name: name,
    meta: {
      title: title,
    },
    component: (resolve) => require(['../pages/' + name + '.vue'], resolve),
    children: children,
  }, other)
}


let page = [];
// 测试页
page.push(
  path('form', 'test/form', '测试'),
  path('table', 'test/table', 'acc'),
);
// 流程管理
page.push(
  path('form', 'process/list', ''),
);

export default new Router({
  mode: 'history',
  routes: [
    path('/', 'index', '首页',{redirect:'/home/index'}),
    path('/login', 'public/login', '登录'),
    //嵌套结构页
    path('/home', 'home', '', '', [
      path('index', 'public/home_index', ''), // 上下结构
      path('aside', 'public/aside', '', '', page), // 上左右结构
    ]),
  ]
})