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

深藏阁楼爱情的钟 2023-01-09 12:33 115阅读 0赞

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

路由目录结构如图

![20210121100007236.png][]

> ├── router        \# 路由相关所有文件
> 
> │   │── modules                             \# 以一级菜单命名的模块文件
> 
> │   │── \_import\_xxxx.ts                 \#  开发、生产环境的配置
> 
> │   │── common.ts                         \# 500、404、403、401等页面的路由配置
> 
> │   │── constant.ts                         \# 常量相关
> 
> │   └── index.ts                              \#  核心配置文件

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

![2021012110484650.png][]

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

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

1.  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 配置文件 ###

1.    \_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配置相关-文章结束，原创不易，感谢浏览！

[20210121100007236.png]: /images/20221119/56f79ee4afb544e6bfa84db01fe661af.png
[2021012110484650.png]: https://img-blog.csdnimg.cn/2021012110484650.png