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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JS数组splice操作实例分析
Oct 12 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
javascript 写类方式之一
2009/07/05 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
javascript 闭包疑问
2010/12/30 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
js倒计时抢购实例
2015/12/20 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
收集的几个Python小技巧分享
2014/11/22 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
中学生期末评语
2014/02/03 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技