Vue Router的集中统一管理

一般我们在vue中配置路由都是这样的写法,一个一个的引入. 但是我们的项目是一个很多模块的项目,越到最后router.js
配置的路由就会越来越多.到最后我们就会变得很难以维护. 接下来我们就介绍一种便于维护,统一管理router的方法.

先来看一下目录结构, 我们需要新建一个route文件夹,专门用来存放不同模块的路由.便于我们统一管理.然后在router.js 中封装一个遍历读取router文件夹中文件的函数(借用了webpack的api). 之后每次需要添加路由我们只需要在router文件中配置对应路由js文件就可以了.

login.routes.js

//在此js中配置login页面的路由,及其子路由(index等其他页面也都是如此配置)
export default{path:"/login",name:"login",component:()=>import("./view/login.vue"),children:[]
}

router.js

import Vue from "vue"
import Router fron "voe-router"const routerList = [];//匹配路由文件的封装
function importAll(r){r.keys().forEach((key) => routerList.push(r(key).default));
}
//函数的调用
//参数(目标文件夹,是否查找子集,正则匹配)
//require为webpack的api可以访问本地文件
importAll(require.context("./router",true,/\.routes\.js/))
Vue.use(Router)export default new Router({router:[...routerList]
])

Vue Router的集中统一管理相关推荐

Vue + webpack 项目配置化、接口请求统一管理
准备工作需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题. 又或者后面其他同事接手你的模块,或者改你的bug ...
四十三、在Vue使用router，路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录安装Vue Router Vue Router使用 ...
Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
vue工程代码优化：新建utils文件夹统一管理工具函数
目录一.总体思路二.具体流程 1.在src下面新建一个目录utils文件夹 2.在utils文件夹下新建一个index.js文件 3.main.js挂载到vue实例中三.如何使用 vue项目工程 ...
Vue Router路由管理器
目录: 相关理解基本路由几个注意事项嵌套(多级)路由路由的query参数命名路由路由的params参数路由的props配置路由跳转的replace方法编程式路由导航缓存路由组件 a ...
在vue项目中统一管理api
在前后端分离的项目中,前端对api进行统一管理. 第一步:进行跨域配置: 在config下index.js中修改以下代码: 第二步:创建自己接口封装的文件在src目录下创建HTTP文件夹.文件目录结 ...
一步步使用SpringBoot结合Vue实现登录和用户管理功能
文章目录前言 1.前后端分离简介 2.示例所用技术简介一.环境准备 1.前端 1.1.安装Node.js 1.2.配置NPM源 1.3.安装vue-cli脚手架 1.4.VS Code 1.5.C ...
Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点实现SPA的几个关键点理解SPA单页面架构什么是前端路由锚链接与URL中的hash值通过hashch ...

Vue Router的集中统一管理

Vue Router的集中统一管理相关推荐

最新文章

热门文章