电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

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

瀏覽:112日期:2022-12-08 09:29:52

這里說的路由拆分指的是將路由的文件,按照模塊拆分,這樣方便路由的管理,更主要的是方便多人開發(fā)。具體要不要拆分,那就要視你的項(xiàng)目情況來定了,如果項(xiàng)目較小的話,也就一二十個(gè)路由,那么是拆分是非常沒必要的。但倘若你開發(fā)一些功能點(diǎn)較多的商城項(xiàng)目,路由可以會(huì)有一百甚至幾百個(gè),那么此時(shí)將路由文件進(jìn)行拆分是很有必要的。不然,你看著index.js文件中一大長(zhǎng)串串串串串串的路由,也是很糟糕的。

首先我們?cè)趓outer文件夾中創(chuàng)建一個(gè)index.js作為路由的入口文件,然后新建一個(gè)modules文件夾,里面存放各個(gè)模塊的路由文件。例如這里儲(chǔ)存了一個(gè)vote.js投票模塊的路由文件和一個(gè)公共模塊的路由文件。下面直接上index.js吧,而后在簡(jiǎn)單介紹:

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, ]}) // 路由變化時(shí)router.beforeEach((to, from, next) => { if (document.title !== to.meta.title) {document.title = to.meta.title; } next()}) // 導(dǎo)出export default router

首先引入vue和router最后導(dǎo)出,這就不多說了,基本的操作。

這里把router.beforeEach的操作寫了router的index.js文件中,有些人可能會(huì)寫在main.js中,這也沒有錯(cuò),只不過,個(gè)人而言,既然是路由的操作,還是放在路由文件中管理更好些。這里就順便演示了,如何在頁面切換時(shí),自動(dòng)修改頁面標(biāo)題的操作。

而后引入你根據(jù)路由模塊劃分的各個(gè)js文件,然后在實(shí)例化路由的時(shí)候,在routes數(shù)組中,將導(dǎo)入的各個(gè)文件通過結(jié)構(gòu)賦值的方法取出來。最終的結(jié)果和正常的寫法是一樣的。

然后看下我們導(dǎo)入的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: ’投票詳情’ } }]

這里就是將投票模塊的路由放在一個(gè)數(shù)組中導(dǎo)出去。整個(gè)路由拆分的操作,不是vue的知識(shí),就是一個(gè)es6導(dǎo)入導(dǎo)出和結(jié)構(gòu)的語法。具體要不要拆分,還是因項(xiàng)目和環(huán)境而異吧。

這里的路由用到了懶加載路由的方式,如果不清楚,文字上面有介紹到。

還有這里的meta元字段中,定義了一個(gè)title信息,用來存儲(chǔ)當(dāng)前頁面的頁面標(biāo)題,即document.title。

補(bǔ)充知識(shí):vue的自動(dòng)化路由+分模塊管理+路由懶加載

近期單獨(dú)做了一個(gè)系統(tǒng)項(xiàng)目,項(xiàng)目不大但是頁面太多了,為了后期維護(hù)管理容易,做了個(gè)自動(dòng)化加載路由以及模塊化的管理。在此記錄一下。

直接擼代碼

1.首先看目錄

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

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

views下每個(gè)目錄為一個(gè)模塊,目錄下每個(gè)pages文件夾存放頁面。每個(gè)模塊有一個(gè)單獨(dú)的.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

//檢索每一個(gè)模塊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數(shù)組 ...arr ]}) export default router

完成~

以上這篇vue路由分文件拆分管理詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 液氨泵,液化气泵-淄博「亚泰」燃气设备制造有限公司 | 北京成考网-北京成人高考网| 日本SMC气缸接头-速度控制阀-日本三菱伺服电机-苏州禾力自动化科技有限公司 | 金属雕花板_厂家直销_价格低-山东慧诚建筑材料有限公司 | _网名词典_网名大全_qq网名_情侣网名_个性网名 | 深圳诚暄fpc首页-柔性线路板,fpc柔性线路板打样生产厂家 | 耐酸泵,耐酸泵厂家-淄博华舜耐腐蚀真空泵 | 苏州防水公司_厂房屋面外墙防水_地下室卫生间防水堵漏-苏州伊诺尔防水工程有限公司 | 上海律师事务所_上海刑事律师免费咨询平台-煊宏律师事务所 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 首页|成都尚玖保洁_家政保洁_开荒保洁_成都保洁 | 南京办公用品网-办公文具用品批发-打印机耗材采购 | 基业箱_环网柜_配电柜厂家_开关柜厂家_开关断路器-东莞基业电气设备有限公司 | 卧涛科技有限公司科技项目申报公司|高新技术企业申报|专利申请 | 天助网 - 中小企业全网推广平台_生态整合营销知名服务商_天助网采购优选 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | 磁力抛光机_磁力研磨机_磁力去毛刺机-冠古设备厂家|维修|租赁【官网】 | 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 电脑知识|软件|系统|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网 | 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | 抖音短视频运营_企业网站建设_网络推广_全网自媒体营销-东莞市凌天信息科技有限公司 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 科研ELISA试剂盒,酶联免疫检测试剂盒,昆虫_植物ELISA酶免试剂盒-上海仁捷生物科技有限公司 | 塑料造粒机「厂家直销」-莱州鑫瑞迪机械有限公司| 防爆电机生产厂家,YBK3电动机,YBX3系列防爆电机,YBX4节防爆电机--河南省南洋防爆电机有限公司 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 艾乐贝拉细胞研究中心 | 国家组织工程种子细胞库华南分库 | 河南砖机首页-全自动液压免烧砖机,小型砌块水泥砖机厂家[十年老厂] | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 刚性-柔性防水套管-橡胶伸缩接头-波纹管补偿器-启腾供水材料有限公司 | 桂林腻子粉_内墙外墙抗裂砂浆腻子粉推荐广西鑫达涂料厂家供应 | 德国UST优斯特氢气检漏仪-德国舒赐乙烷检测仪-北京泽钏 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 蜘蛛车-登高车-高空作业平台-高空作业车-曲臂剪叉式升降机租赁-重庆海克斯公司 | 找果网 | 苹果手机找回方法,苹果iPhone手机丢了找回,认准找果网! | 闪蒸干燥机-喷雾干燥机-带式干燥机-桨叶干燥机-[常州佳一干燥设备] | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | 蓄电池在线监测系统|SF6在线监控泄露报警系统-武汉中电通电力设备有限公司 |