vue 模組化 路由拆分配置

2022-01-14 20:43:44 字數 920 閱讀 8586

通常我們編寫vue路由配置都會寫在/src/router/index.js這個檔案下。

但是,隨著我們的vue專案變得越來越大後,路由也隨之變得越來越多,出現的問題就是我們所有的路由都定義在乙個檔案下,**會變得可讀性差,難以維護。 如下圖所示。

比如說我們可以在/src/router/目錄下面新建乙個common.jsmessage.js檔案

common.js檔案裡面我們這麼寫,把公用的路由配置寫在裡面

然後我們再抽離出乙個message.js訊息模組,把和訊息相關的路由配置寫在這個模組裡

同理,我們通過這種方式就可以把index.js路由配置檔案,拆成了多個路由模組,這樣我們就可以分模組來維護我們的路由配置,可讀性也變高了。

假設我們已經按功能拆分好了多個路由模組,目錄結構如下

得到了多個路由模組,最後我們可以利用es6的擴充套件運算子,將多個模組整合到配置檔案裡

這樣拆分後就方便以後維護和更新了

Vue路由按模組拆分配置

通常我們編寫vue路由配置都會寫在 src router index.js這個檔案下。但是,隨著我們的vue專案變得越來越大後,路由也隨之變得越來越多,出現的問題就是我們所有的路由都定義在乙個檔案下,會變得可讀性差,難以維護。如下圖所示。然後我們再抽離出乙個message.js訊息模組,把和訊息相關...

vue 路由模組化

專案結構 引入公共的scss 注意 建立專案的時候必須用scss import assets css basic.scss import router from router router.js 4 掛載路由 newvue 新聞 使用者router.js import vue from vue 配置...

Vue模組化之路由router

在使用vue cli腳手架時我們在自定義路由的時候的步驟 新建router資料夾 新建router的js檔案 引入vue router等檔案 import vue from vue import vuerouter from vue router 模組化使用vue router 模組化載入 vue....