Vue路由的模块自动化与统一加载实现


Posted in Javascript onJune 05, 2020

首先呢,我们来看看一般项目路由是怎么划分的。

Vue路由的模块自动化与统一加载实现

为什么这么划分呢?如果大项目业务非常多,单纯的单页面很难维护,我们只有这样规范化,才能高效率。

模块自动化与统一加载的好处:

  • 规范化命名(模块名.业务名.vue)
  • 不用每次写页面都要去总路由引入组件

接下来,我们实战一波。

一、建立项目文件目录以及文件夹

根据上面的要求建立,依次在src文件夹下的components文件夹下建立一个如名叫model1文件夹用于存放功能模块(可以分别创建多个模块文件夹,里面分别存放业务代码)。在该文件夹下创建components文件夹,用于存放组件。创建pages文件夹,用于存放页面。创建index.route.js,用于存放模块路由代码。

Vue路由的模块自动化与统一加载实现

二、编写模块路由

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文件

Vue路由的模块自动化与统一加载实现

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 // 展开数组
 ]
})

这样就完毕了,源代码地址

到此这篇关于Vue路由的模块自动化与统一加载实现的文章就介绍到这了,更多相关Vue路由模块自动化与统一加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
Jquery ui css framework
Jun 28 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
微信小程序 教程之模板
Oct 18 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
Koa 使用小技巧(小结)
Oct 22 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
详解JS函数防抖
Jun 05 #Javascript
Vuex的各个模块封装的实现
Jun 05 #Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 #Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 #Javascript
vscode 插件开发 + vue的操作方法
Jun 05 #Javascript
vue渲染方式render和template的区别
Jun 05 #Javascript
You might like
多文件上传的例子
2006/10/09 PHP
15种PHP Encoder的比较
2007/03/06 PHP
php 图片上传类代码
2009/07/17 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python生成随机红包的实例写法
2019/09/02 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
python中实现栈的三种方法
2020/12/19 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
人力资源专业推荐信
2013/11/29 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
保管员岗位职责
2015/02/14 职场文书
毕业欢送会致辞
2015/07/29 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书