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动态加载select下拉框示例代码
Dec 10 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
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
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php数组去重复数据示例
2014/02/25 PHP
php绘制一条弧线的方法
2015/01/24 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
vue中的inject学习教程
2019/04/24 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python递归全排列实现方法
2018/08/18 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
工作决心书
2014/03/11 职场文书
土地租赁意向书
2014/07/30 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Python os和os.path模块详情
2022/04/02 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis