加快Vue项目的开发速度的方法(2)

日期：2020-05-11 栏目：程序人生浏览：次

modules文件夹中处理业务模块

modules文件夹中存放着我们所有的业务逻辑模块，至于业务逻辑模块怎么分，我相信大家自然有自己的一套标准。我们通过上面提到的require.context()接下来编写自动化的核心部分index.js。

const files = require.context('.', true, /\.js$/)

console.log(files.keys()) // ["./home.js"] 返回一个数组
let configRouters = []
files.keys().forEach(key => {
 if (key === './index.js') return
 configRouters = configRouters.concat(files(key).default) // 读取出文件中的default模块
})
export default configRouters // 抛出一个Vue-router期待的结构的数组

自动化部分写完了，那业务组件部分怎么写？这就更简单了

import Frame from '@/views/frame/Frame'
import Home from '@/views/index/index'
export default [
  // 首页
  {
   path: '/index',
   name: '首页',
   redirect: '/index',
   component: Frame, 
   children: [ // 嵌套路由
    {
     path: '',
     component: Home
    }
   ]
  }
]

common路由处理

我们的项目中有一大堆的公共路由需要处理比如404阿，503阿等等路由我们都在common.js中进行处理。

export default [
 // 默认页面
 {
  path: '/',
  redirect: '/index',
  hidden:true
 },
 // 无权限页面
 {
  path: '/nopermission',
  name: 'nopermission',
  component: () => import('@/views/NoPermission')
 },
 // 404
 {
  path: '*',
  name: 'lost',
  component: () => import('@/views/404')
 }
]

路由初始化

这是我们的最后一步了，用来初始化我们的项目路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import RouterConfig from './modules' // 引入业务逻辑模块
import CommonRouters from './common' // 引入通用模块
Vue.use(VueRouter)
export default new VueRouter({
 mode: 'history',// 需要服务端支持
 scrollBehavior: () => ({ y: 0 }),
 routes: RouterConfig.concat(CommonRouters)
})

估计有些朋友代码写到这还不知道到底这样做好处在哪里。我们来描述一个场景，比如按照这种结构来划分模块。正常的情况是我们创建完home.js要手动的把这个模块import到路由文件声明的地方去使用。但是有了上面的index.js，在使用的时候你只需要去创建一个home.js并抛出一个符合VueRouter规范的数组，剩下的就不用管了。import RouterConfig from './modules' // 引入业务逻辑模块 已经帮你处理完了。另外扩展的话你还可以把hooks拿出来作为一个单独文件。

加快Vue项目的开发速度的方法(2)

相关推荐