Vue路由按模組拆分配置

2021-10-10 02:05:00 字數 826 閱讀 6263

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

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

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

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

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

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

import vue from 'vue'

import router from 'vue-router'

import message from './message'

vue.use(router)

export default new router()

vue 模組化 路由拆分配置

通常我們編寫vue路由配置都會寫在 src router index.js這個檔案下。但是,隨著我們的vue專案變得越來越大後,路由也隨之變得越來越多,出現的問題就是我們所有的路由都定義在乙個檔案下,會變得可讀性差,難以維護。如下圖所示。比如說我們可以在 src router 目錄下面新建乙個com...

vue根據模組拆分路由

在專案開發過程中,路由用的乙個檔案 每個人都去操作,加上頁面挺多了,被版本衝突弄得死去活來得,所以這裡下來做了乙個路由拆分成各個模組 import vue from vue import vuerouter from vue router 這裡引入其他模組得路由 vue.use vuerouter ...

vue路由配置,vue子路由配置

現在乙個專案已經部署完成,接下來我們從路由開始!還記得在初始化專案的時候,有提示是否需要安裝vue router,對沒錯,vue中路由全靠它!首先找到路由配置檔案 router index.js,是整個專案路由配置檔案 首先看最上面的,這個模組引入,es2015中的import.from.將你需要配...