-
前奏Tips:考虑了很久,基于现有的认知,现按项目页面体量,得出如下梳理:
-
1. 小型项目(页面量不是很多):
- 直接写到一个文件内[太少了,没必要拆吧]
- 常用套路步骤(如官网)
import Vue from 'vue'
import 'VueRouter' from 'vue-router'
Vue.use(VueRouter)
------------
const routes = [
{ path: '/foo', component: ()=>import('...../foo.vue') },
{ path: '/bar', component: ()=>import('...../bar.vue') }
]
------------
const router = new VueRouter({
routes
})
------------
const app = new Vue({
router
}).$mount('#app')
-
2. 中型项目(页面量不少也不多):
- 常规分拆,按照模块,通过ES6拓展符聚合
- 足够应对一般的常规的项目
- 常用套路步骤
const routes = [
{ path: '/foo1', component: ()=>import('...../foo1.vue') },
{ path: '/foo2', component: ()=>import('...../foo2.vue') },
{ path: '/foo3', component: ()=>import('...../foo3.vue') },
]
const routes = [
{ path: '/bar1', component: ()=>import('...../bar1.vue') },
{ path: '/bar2', component: ()=>import('...../bar2.vue') },
{ path: '/bar3', component: ()=>import('...../bar3.vue') },
]
import foo from '....../foo'
import bar from '....../bar'
const routes = [
{path: '/', redirect:{name:'index'} },
...foo,
...bar,
{path: '*', component: ()=>import('...../erro.vue')}
]
------------
import Vue from 'vue'
import 'VueRouter' from 'vue-router'
import routes from '..../root-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
------------
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中添加如下:
const context = require.context('./pages/', true, /router\.js$/)
const routes = context.keys().map(key => context(key).default)
export default new VueRouter({ routes });
- 常用套路步骤:
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')
},
.......
]
}
------------
const context = require.context('./pages/', true, /router\.js$/)
const routes = context.keys().map(key => context(key).default)
export default routes;
------------
import Vue from 'vue'
import 'VueRouter' from 'vue-router'
import routes from '..../root-router.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
------------
const app = new Vue({
router
}).$mount('#app')
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡