Vue路由的模块自动化与统一加载实现
作者:Vam的金豆之路 发布时间:2024-04-27 16:17:15
标签:Vue,路由,模块自动化,统一加载
首先呢,我们来看看一般项目路由是怎么划分的。
为什么这么划分呢?如果大项目业务非常多,单纯的单页面很难维护,我们只有这样规范化,才能高效率。
模块自动化与统一加载的好处:
规范化命名(模块名.业务名.vue)
不用每次写页面都要去总路由引入组件
接下来,我们实战一波。
一、建立项目文件目录以及文件夹
根据上面的要求建立,依次在src文件夹下的components文件夹下建立一个如名叫model1文件夹用于存放功能模块(可以分别创建多个模块文件夹,里面分别存放业务代码)。在该文件夹下创建components文件夹
,用于存放组件。创建pages文件夹
,用于存放页面。创建index.route.js
,用于存放模块路由代码。
二、编写模块路由
在index.route.js
文件下编写,
let router = require.context("./pages",true,/.vue/); // require.context()是webpack提供的方法,这个方法的第一个参数是require的一个文件夹,第二个参数是否遍历子目录,第三个参数是筛选什么类型的文件。
let arr = [];
// router是一个方法,直接调用会出错,router.keys()是router里的一个静态方法。
console.log(router.keys()); // ["./model1.index.vue", "./model1.second.vue"]
router.keys().forEach((key) => {
let _keyarr=key.split("."); // 分割字符串。如"./model1.index.vue"
if(key.indexOf("index")!=-1){ // 判断每一项字符串是否有index,有即首页
arr.push({
path:_keyarr[1],
component:router(key).default, // 相当于import
meta:{
title:_keyarr[1].replace('/','') // 删除"/"
}
})
}
else{
arr.push({
path:_keyarr[1]+"/"+_keyarr[2],
component:router(key).default,
meta:{
title:_keyarr[2]
}
})
}
});
export default arr
三、编写总路由
找到router文件夹
下的index.js
文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let router = require.context("../components",true,/\.route\.js/);
let arr=[];
router.keys().forEach((key) => {
arr=arr.concat(router(key).default); // 拼接数组
});
export default new Router({
routes: [
...arr // 展开数组
]
})
这样就完毕了,源代码地址
来源:https://blog.csdn.net/qq_39045645/article/details/103848695


猜你喜欢
- Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布
- 数据库操作类的优点优点可以说是非常多了,常见的优点就是便于维护、复用、高效、安全、易扩展。例如PDO支持的数据库类型是非常多的,与mysql
- 看书笔记db file scattered read DB ,db file sequential read DB,free buffer
- 使用pandas读xlsx文件读取前n行数据读取指定数据(指定行指定列)获取文件行号和列标题将数据转换为字典形式import pandas
- 业务说明:此示例脚本作用,包含方法和逻辑:图像读取,图片尺寸读取,重置图片大小,图片等比缩放,图片拼接,图片覆盖与堆叠(子母图)图片展示:单
- 本文实例讲述了PHP实现的MD5结合RSA签名算法。分享给大家供大家参考,具体如下:<?phpclass Md5RSA{
- 解决方案1.安装django-cors-headerspip install django-cors-headers2.配置settings
- 这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前端使用jquery ajax与接口进行交互,
- 昨天修改机顶盒上面的EPG页面,遇到一个小问题。用户购买游戏时需要弹出购买确认对话框,对话框的默认焦点规定必须停留在“取消”按键上。很简单的
- Jupyter Notebook 的快捷键使用前需要进行安装:pip install jupyter (前提是你已经安装好Python,并将
- 以SQL Server 2012 为例上图是部分数据库的截图, 我们执行DENY VIEW any DATABASE to PUBLIC;然
- 去年中秋开始,小编一直在忙旅游公司的30多个网站,在网站项目中,网站客服需要在网站中添加某个客服交谈工具代码,还需要对PC和手机添加不一样的
- 检查node的版本和gulp版本,最好使用nvm来管理node版本,本人遇到这两种版本匹配的时候会造成layaair2-cmd命令编译报错的
- 字符串的表示方式单引号 ' '双引号 " "多引号 """ "&
- 所有编程语言都离不开循环。因此,默认情况下,只要有重复操作,我们就会开始执行循环。但是当我们处理大量迭代(数百万/十亿行)时,使用循环是一种
- 本文实例讲述了php打包压缩文件之ZipArchive方法用法。分享给大家供大家参考,具体如下:前面说到了php打包压缩文件之PclZip方
- 首先来看一个封装的curl函数function request_post($url = '', $param = '
- python最值与下标最大值的下标winner = np.argmax(scores)多个最大值的下标(np.argwhere返回数组中非0
- 前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航,就尝试做了一下。结果碰到了几个问题,后来在同事
- 写在前面机器学习强基计划聚焦深度和广度,加深对机器学习模型的理解与应用。“深”在详细推导算法模型背后