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
0
投稿
猜你喜欢
- 1 from multiprocessing import Pool,Queue。其中Queue在Pool中不起作用,具体原因未明。解决方案
- 本文实例讲述了Laravel框架路由管理。分享给大家供大家参考,具体如下:路由中输出视图Route::get('/', fu
- 一、创建模型类:# -*- coding: utf-8 -*-from __future__ import unicode_literals
- 问题一:在安装时候输入 net start mysql 时候报错为:net不是内部或外部命令也不是可运行。解决方法: 环境变量的问题:首先确
- 注意!#号后面是需要操作的地方。 1.前提注意事项 首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库。 因为在重新设
- <script language='javascript' for='document' event=
- 今天在网上看到type的一段代码 ,然后查了一下文档,才知道type还有三个参数的用法。http://docs.python.org/2/l
- 本文实例讲述了Python Web编程之WSGI协议。分享给大家供大家参考,具体如下:WSGI简介Web框架和Wen服务器之间需要进行通信,
- 如下所示:ljust(len,str)字符向左对齐,用str补齐长度rjust(len,str)字符向右对齐,用str补齐长度rjust(l
- 本文实例讲述了python实现合并两个数组的方法。分享给大家供大家参考。具体如下:python合并两个数组,将两个数组连接成一个数组,例如,
- 今天用python实现了一下简单的聚类分析,顺便熟悉了numpy数组操作和绘图的一些技巧,在这里做个记录。from pylab import
- 数据合并是数据处理过程中的必经环节,pandas作为数据分析的利器,提供了四种常用的数据合并方式,让我们看看如何使用这些方法吧!1.conc
- 昨天在书友会上讨论信息分类和方法,有位朋友问:“大家现在讨论的还是几年前那套web2.0的东西,有没有一些新的东西可以分享?”我当时确实感觉
- 目录前言算法原理目标函数算法流程 Python实现总结前言K-Means 是一种非常简单的聚类算法(聚类算法都属于无监督学习)。给
- PS: 传送门——自定义Colorbars教程自定义colorbar(draw colorbar w
- 效果可执行正常加减乘除相关运算,源码已贴,自行测试。源码# coding=gbk"""作者:川川@时间 &nb
- 问题:将文件夹a下任意命名的10个文件修改为如下图所示文件?代码:#coding:utf-8import ospath = "./
- 问题描述:我有一个这样的数据集叫test_result_test.txt,大概几百上千行,两行数据之间隔一个空行。N:505904X:0.9
- Python实现按某一列关键字分组,并计算各列的平均值,并用该值填充该分类该列的nan值。DataFrame数据格式fillna方式实现gr
- Scala的环境搭建由于scala是基于java来开发的, 编写的java类可以使用javac命令编译成.class文件被JVM加载到内存中