一般我們在vue中配置路由都是這樣的寫法,一個一個的引入. 但是我們的項目是一個很多模塊的項目,越到最后router.js
配置的路由就會越來越多.到最后我們就會變得很難以維護. 接下來我們就介紹一種便于維護,統(tǒng)一管理router的方法.

先來看一下目錄結構, 我們需要新建一個route文件夾,專門用來存放不同模塊的路由.便于我們統(tǒng)一管理.然后在router.js 中封裝一個遍歷讀取router文件夾中文件的函數(shù)(借用了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)); } //函數(shù)的調(diào)用 //參數(shù)(目標文件夾,是否查找子集,正則匹配) //require為webpack的api可以訪問本地文件 importAll(require.context("./router",true,/\.routes\.js/)) Vue.use(Router)export default new Router({router:[...routerList] ])

總結

以上是生活随笔為你收集整理的Vue Router的集中统一管理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。