此篇幅主要介绍、我们是如何做路由的配置和路由常量的抽离,如有不足和建议请留言,在此感谢,项目目前阶段还处在少年,一直在迭代,路由版本目前为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配置相关-文章结束,原创不易,感谢浏览!