Vue Router自動生成路由方法

使用require.context() 自動生成路由

檔案較多，修改起來較為複雜。

2、解決辦法：

webpack官網中有這麼一句話的介紹：

webpack 官方中文文件​webpack.docschina.org

4、專案結構

開發專案所有需要跳轉的頁面設計到乙個打目錄位置中，其餘所需元件放置到其他檔案中，不需要展示的頁面元件影響路由生成的效果，比如：

然後使用正則獲取檔案，拿到路徑以及檔案的名字進行封裝之後和routes屬性賦值對應即可，再比如這段**：

import vue from 'vue'

import router from 'vue-router'
vue.use(router)
let routerarr = 
const contexts = require.context('../pages', true, /\.vue$/)
contexts.keys().foreach(value => `)
})})export default new router()

5、總結

從上面的介紹中可以看出生成的效果單層路由方式的，格式可以理解為：

頁面一： /a

頁面二： /a/b

我這裡面沒有寫包含自路由的封裝格式，但是我沒寫不代表不可以做，思想都是一樣的，但是需要特殊判斷資料夾的位置資訊，vue檔案的位置資訊，然後封裝父子路由格式等。

還有諸如路由元資料填充等動態資訊，同樣可以在迴圈keys資料封裝路由資訊過程中呼叫靜態屬性，或者是定義外部配置檔案進行操作。不管怎麼說，都是為了防止在反反覆覆增加頁面操作需要路由定向時反反覆覆。

雖然每次追加新定向路由**時間不長，但是精簡檔案性質的偷懶不僅僅是節省開發時間，定向路由自動生成更是對資料夾以及檔案位置歸檔的一種規範。（好吧，如果大家要是有不同意見，麻煩留情不要把我噴死）。

就如上面說的那樣，最近有時間會追加父子路由的方式。

特殊宣告：以上僅代表個人意見，不喜勿噴，覺得好記得點讚關注！

drf自動生成路由

匯入模組 from rest framework.routers import router,defaultrouter 例項化物件 sr router 註冊 register 可以註冊多個 sr.register 字首路由不用加斜槓 繼承自viewsetmixin的檢視類 別名 反向解析使用 sr...

vue router路由巢狀

巢狀路由顧名思義就是路由的多層巢狀。結合vue router仿天貓底部導航欄，給元件me新增巢狀路由，也叫子路由。總共新增兩個子路由，分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置，需要使用children陣列來定義子...

vue router 配置路由

vue router 配置路由 用 vue.js vue router 建立單頁應用，是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式，當你要把 vue router 新增進來，我們需要做的是，將元件 components 對映到路由 routes 然後告訴 vue rout...