vue路由分文件拆分管理详解


Posted in Javascript onAugust 13, 2020

这里说的路由拆分指的是将路由的文件,按照模块拆分,这样方便路由的管理,更主要的是方便多人开发。具体要不要拆分,那就要视你的项目情况来定了,如果项目较小的话,也就一二十个路由,那么是拆分是非常没必要的。但倘若你开发一些功能点较多的商城项目,路由可以会有一百甚至几百个,那么此时将路由文件进行拆分是很有必要的。不然,你看着index.js文件中一大长串串串串串串的路由,也是很糟糕的。

首先我们在router文件夹中创建一个index.js作为路由的入口文件,然后新建一个modules文件夹,里面存放各个模块的路由文件。例如这里储存了一个vote.js投票模块的路由文件和一个公共模块的路由文件。下面直接上index.js吧,而后在简单介绍:

import Vue from 'vue'
import Router from 'vue-router'
 
// 公共页面的路由文件
import PUBLIC from './modules/public' 
// 投票模块的路由文件
import VOTE from './modules/vote' 
 
Vue.use(Router)
 
// 定义路由
const router = new Router({ 
  mode: 'history', 
  routes: [  
    ...PUBLIC,  
    ...VOTE, 
  ]
})
 
// 路由变化时
router.beforeEach((to, from, next) => {  
  if (document.title !== to.meta.title) {    
    document.title = to.meta.title;  
  }  
  next()
})
 
// 导出
export default router

首先引入vue和router最后导出,这就不多说了,基本的操作。

这里把router.beforeEach的操作写了router的index.js文件中,有些人可能会写在main.js中,这也没有错,只不过,个人而言,既然是路由的操作,还是放在路由文件中管理更好些。这里就顺便演示了,如何在页面切换时,自动修改页面标题的操作。

而后引入你根据路由模块划分的各个js文件,然后在实例化路由的时候,在routes数组中,将导入的各个文件通过结构赋值的方法取出来。最终的结果和正常的写法是一样的。

然后看下我们导入的vote.js吧:

/** 
 * 投票模块的router列表 
 */
 
export default [  
  // 投票模块首页  
  {    
    path: '/vote/index',    
    name: 'VoteIndex',    
    component: resolve => require(['@/view/vote/index'], resolve),    
    meta: {      
      title: '投票'    
    }  
  },  
  // 详情页  {    
  path: '/vote/detail',    
  name: 'VoteDetail',    
  component: resolve => require(['@/view/vote/detail'], resolve),
  meta: {      
    title: '投票详情'    
  }  
}]

这里就是将投票模块的路由放在一个数组中导出去。整个路由拆分的操作,不是vue的知识,就是一个es6导入导出和结构的语法。具体要不要拆分,还是因项目和环境而异吧。

这里的路由用到了懒加载路由的方式,如果不清楚,文字上面有介绍到。

还有这里的meta元字段中,定义了一个title信息,用来存储当前页面的页面标题,即document.title。

补充知识:vue的自动化路由+分模块管理+路由懒加载

近期单独做了一个系统项目,项目不大但是页面太多了,为了后期维护管理容易,做了个自动化加载路由以及模块化的管理。在此记录一下。

直接撸代码

1.首先看目录

vue路由分文件拆分管理详解

router下的index.js是路由配置文件。

views下每个目录为一个模块,目录下每个pages文件夹存放页面。每个模块有一个单独的.router.js去管理。

2.先以asupmatset.router.js为例子

const arr= [];
function importPages(r, arr) {
 r.keys().forEach((key) => {
  let _keyarr = key.split(".");
  let _path = _keyarr[1];
 
  if (_keyarr[2] === "param") {
   _path = _keyarr[1] + "/:row";
  }
  arr.push({
   path: _path,
   name: _keyarr[1].substring(1, _keyarr[1].length + 1),
   component: () => r(key),
  });
 });
}
fun(require.context("./pages", true, /\.vue$/, "lazy"), arr);
export default arr;

3.再到路由文件index.js

//检索每一个模块router.js中的路由
var r=require.context("../views",true,/\.router\.js/)
var arr=[];
r.keys().forEach((key)=>{
 arr=arr.concat(r(key).default);
})
 
var router = new Router({
 routes: [
  //加入我们拿到的arr数组
  ...arr
 ]
})
 
export default router

完成~

以上这篇vue路由分文件拆分管理详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 #Javascript
vue 实现把路由单独分离出来
Aug 13 #Javascript
vue项目接口域名动态获取操作
Aug 13 #Javascript
vue接通后端api以及部署到服务器操作
Aug 13 #Javascript
vue打包npm run build时候界面报错的解决
Aug 13 #Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 #Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 #Javascript
You might like
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
详解js异步文件加载器
2016/01/24 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python实现用户答题功能
2018/01/17 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python对Excel的读取的示例代码
2020/02/14 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
jupyter 导入csv文件方式
2020/04/21 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
详解python UDP 编程
2020/08/24 Python
python爬虫请求头的使用
2020/12/01 Python
一些关于MySql加速和优化的面试题
2014/01/30 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python