-
前奏Tips：考虑了很久,基于现有的认知,现按项目页面体量,得出如下梳理:
-
1. 小型项目（页面量不是很多）：
- 直接写到一个文件内[太少了,没必要拆吧]
- 常用套路步骤(如官网)
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用
import Vue from 'vue'
import 'VueRouter' from 'vue-router'
Vue.use(VueRouter)
------------
// 1. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: ()=>import('...../foo.vue') },
{ path: '/bar', component: ()=>import('...../bar.vue') }
]
------------
// 2. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
------------
// 3. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
-
2. 中型项目（页面量不少也不多）：
- 常规分拆，按照模块，通过ES6拓展符聚合
- 足够应对一般的常规的项目
- 常用套路步骤
// 1. 定义路由
// foo模块路由,index.js如下：
const routes = [
{ path: '/foo1', component: ()=>import('...../foo1.vue') },
{ path: '/foo2', component: ()=>import('...../foo2.vue') },
{ path: '/foo3', component: ()=>import('...../foo3.vue') },
]
// bar模块路由,index.js如下：
const routes = [
{ path: '/bar1', component: ()=>import('...../bar1.vue') },
{ path: '/bar2', component: ()=>import('...../bar2.vue') },
{ path: '/bar3', component: ()=>import('...../bar3.vue') },
]
// 总的router中聚合
import foo from '....../foo'
import bar from '....../bar'
const routes = [
{path: '/', redirect:{name:'index'} },
...foo,
...bar,
{path: '*', component: ()=>import('...../erro.vue')}
]
------------
// 2. 如果使用模块化机制编程，导入Vue和VueRouter，要调用
import Vue from 'vue'
import 'VueRouter' from 'vue-router'
import routes from '..../root-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
------------
// 3. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
-
3. 大型及特大型项目（页面量很多，企业级）：
- 前两种基本都是集中化的管理页面，但是随着项目规模越来越大，单个js会管理大量的页面路由，维护起来有一定的困难，不够自动化
- 设计思路：既然大量的页面路由在单个js文件维护存在困难，那不如就路由根据业务进行拆分管理，每个业务对应的页面由其对应的路由文件来管理，然后在总的路由文件中再聚合各业务的路由文件
- 解决方案：核心技术【webpack的require.context()】【核心：通过正则匹配引入对应的模块】
- require.context(directory, useSubdirectories = false, regExp = /^.//);
- 参数说明：
- directory：检索的目录
- useSubdirectories：是否检索子目录
- regExp：匹配文件的正则表达式
- eg:
根路由文件root-router.js中添加如下：
// 获取context
const context = require.context('./pages/', true, /router.js$/)
// 获取 routes
const routes = context.keys().map(key => context(key).default)
export default new VueRouter({ routes });
- 常用套路步骤：
// 1. 按模块构建router.js
// 在views(或者自己起名pages,随意)按照模块构建文件夹
// 每个文件下创建router.js
// 且该router.js只描述该模块的路由情况
// 大致结构如下：
export default {
path: 'card-management',
label: '卡券管理',
name: 'CardManagement',
children: [
{
path: 'list',
name: 'CardManagementList',
label: '券列表',
component: TabPage,
children: [
...CardListRouters,
...CardProvide
]
},
{
path: 'create',
label: '新建卡券',
name: 'CardManagementListCreate',
component: () => import('./CardCreate/Create')
},
.......
]
}
------------
// 2. 聚合routes
// 在文件root-router.js中添加如下：
// 获取context
const context = require.context('./pages/', true, /router.js$/)
// 获取 routes
const routes = context.keys().map(key => context(key).default)
export default routes;
------------
// 3. 如果使用模块化机制编程，导入Vue和VueRouter，要调用
import Vue from 'vue'
import 'VueRouter' from 'vue-router'
import routes from '..../root-router.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
------------
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！