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 相关文章推荐
日期 时间js控件
May 07 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
vue-i18n结合Element-ui的配置方法
May 20 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
微信小程序实现星星评分效果
Nov 01 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
几个学习PHP的网址
2006/11/25 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
索趣科技的答案
2007/02/07 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
css3 border-image使用说明
2010/06/23 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
高级运动鞋:GREATS
2019/07/19 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Vue如何实现组件间通信
2021/05/15 Vue.js
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技