vue2.x搭建saas项目系列之三：router配置相关

此篇幅主要介绍、我们是如何做路由的配置和路由常量的抽离，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代，路由版本目前为v1.0.0

路由目录结构如图

├── router # 路由相关所有文件

│   │── modules # 以一级菜单命名的模块文件

│   │── _import_xxxx.ts # 开发、生产环境的配置

│   │── common.ts # 500、404、403、401等页面的路由配置

│   │── constant.ts # 常量相关

│   └── index.ts # 核心配置文件

由于业务页面都是基于Layout布局，这里就简单介绍下我们的Layout布局、如下图，一级在顶部，二级及二级以下在侧边

接下来，会根据每个模块列举一个实例

modules 文件夹下会有诸多的如下文件 page01.ts、page02.ts、page03.ts、page04.ts、page05.ts、index.ts

page01.ts

import { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
import { page01Constant } from '../constant'

const _import = require('../_import_' + process.env.NODE_ENV)

const page01Router: RouteConfig =  {
  path: '/page01',
  component: Layout,
  redirect: '/page01/index',
  meta: {
    activeMenu: page01Constant.mainLevel,
    sort: page01Constant.sort,                    
    title: '浏览器标签上显示的标题',
  },
  children: [
    {
      path: '/page01/index',
      component: _import('page01Center/index'),
      name: 'index',
      meta: {
        activeMenu: page01Constant.oneLevel,
        title: '浏览器标签上显示的标题',
        icon: 'page01Icon',
        width: '20',
        height: '18',
        hidden: false
      },
    }, {
      path: '/page01/child',
      component: _import('page01Center/page01Child'),
      name: 'child',
      meta: {
        activeMenu: page01Constant.twoLevel,
        title: '浏览器标签上显示的标题',
        icon: 'page01ChildIcon',
        width: '20',
        height: '20',
        hidden: false
      },
    }
  ]
}

export default page01Router

2. index.ts

/**
* @param directory 要搜索的文件夹目录不能是变量，否则在编译阶段无法定位目录
* @return 
  function 返回一个具有 resolve, keys, id 三个属性的方法
  resolve() 它返回请求被解析后得到的模块 id
  keys() 它返回一个数组，由所有符合上下文模块处理的请求组成。 
  id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
*/

const files = require.context('.', false, /\.ts$/)

let operateRouterConfig: any = []

files.keys().forEach((key: string) => {
  if (key === './index.ts') { return }
  operateRouterConfig = operateRouterConfig
    .concat(files(key).default)
    .sort((a: any, b: any) => a.meta.sort ? (a.meta.sort - b.meta.sort) : -1)
    
})

export default operateRouterConfig

_import_xxxx.ts 配置文件

_import_development.ts 使用require配置，异步加载-组件异步加载即为路由的异步加载

module.exports = (file: string) => require(`@/views/${file}.vue`).default

2. _import_production.ts 使用import配置，懒加载方式，用更加简单的写法来组织Vue异步组件和Webpack的代码分隔

module.exports = (file: string) => () => import(`@/views/${file}.vue`)

common.ts 异常状态页面的路由配置

import { RouteConfig } from 'vue-router'
const _import = require('./_import_' + process.env.NODE_ENV)

export const commonRouterConfig: RouteConfig[] = [
  {
    path: '/404',
    name: '404',
    meta: {
      title: '404',
    },
    component: _import('errorPage/404')
  },
  { path: '*', redirect: '/404'},
]

export default commonRouterConfig

constant.ts 常量配置文件

由于业务变动，会新增一级模块，无法控制以后模块排序，如实抽离出这么一个常量配置文件，不管产品如何改变(作怪)，修改起来都是分分钟的事情

export const page01Constant = {
  sort: 1,
  mainLevel: '1',
  oneLevel: '1-1',
  twoLevel: '1-2',
}

index.ts 核心配置文件

import Vue from 'vue'
import Router from 'vue-router';
import RouterConfig from './modules'           // 业务路由 模块
import commonRouterConfig from './common'      // 公共路由

Vue.use(Router)

const originalPush = Router.prototype.push

Router.prototype.push = function push( location: any) {
  return (originalPush.call(this, location) as any).catch((err: any) => err)
}

const scrollBehavior = (savedPosition: any) => {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

const router = new Router({
  scrollBehavior,
  base: process.env.BASE_URL,
  routes: RouterConfig.concat(commonRouterConfig)
})

export default router

到此，router配置相关-文章结束，原创不易，感谢浏览！

vue2.x搭建saas项目系列之三：router配置相关

接下来，会根据每个模块列举一个实例

modules 文件夹下会有诸多的如下文件 page01.ts、page02.ts、page03.ts、page04.ts、page05.ts、index.ts

_import_xxxx.ts 配置文件

common.ts 异常状态页面的路由配置

constant.ts 常量配置文件

index.ts 核心配置文件

猜你喜欢