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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
js如何取消事件冒泡
Sep 23 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
django使用admin站点上传图片的实例
2019/07/28 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
《落花生》教学反思
2014/02/25 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
中层干部培训方案
2014/06/16 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书