vue router的集中统一管理 -ag凯发k8国际

一般我们在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] ])

总结

以上是ag凯发k8国际为你收集整理的vue router的集中统一管理的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。