在軟件開發的過程中，"自動化"這個詞出現的頻率是比較高的。 自動化測試 ， 自動化數據映射 以及各式的代碼生成器。這些詞語的背后，也說明了在軟件開發的過程中，對于那些 重復 、 千篇一律 的事情。人們總是想讓它自己完成，來解放我們的雙手。

“懶惰”是進步的動力

為什么要自動化路由

路由自動化在于解決以下的問題：

目的很簡單，在開發過程中，開發者僅需要做兩件事即可：

開發過程中只需要做這兩步，無需再去關心路由對象如何編寫。

甚至可以忽略第一步，對于小型項目而言。

自動化路由規則

這些規則一部分是給開發者看，另一部分是給程序看的：

路由目錄需要指定 路由目錄下，每一層（一個文件夾即為一層） 必須 要有一個 Layout.vue 文件，用來渲染子路由。 路由目錄下的組件路徑即為其對應的路由，比如指定了 src/views 文件夾，里面的 src/views/admin/users 對應的路由即是： localhost/admin/users 。 路由目錄下不區分大小寫，統一轉換成小寫處理。

以上便是我們制定的自動化路由規則。

定義

先提取出三個概念：

自動化路由的提供者，它就是 對外 開放的接口，開發者只需要使用它就可以。

視圖，指的是一個視圖組件的相關信息，比如路徑、名稱等等。

路由，指的是解析視圖之后對應的路由對象，用于生成 vue-router 的路由對象。

開始開發

由于代碼過長，這里將代碼上傳至 Github , 有興趣的童鞋可以去看看。

這里只描述一下整體流程以及關鍵部分的代碼思路。

先通過 require.context 獲取到指定目錄下的所有 .vue 文件。 通過前綴以及排序操作，將其還原成目錄結構。 通過還原的目錄結構，進行解析。 將解析后的結構轉換成路由對象。

其中最關鍵的地方便是通過 require.context 獲取到的文件列表還原成原來的樹形結構。

還原成樹形結構之后就可以對應樹形結構進行路由對象的生成了。

首先將文件列表進行排序，根據文件的深度進行排序，深度淺的在前，深的在后。

_getViews(dir) {  let views = [];  let keys = dir.keys();  for (let index in keys) {    let path = keys[index];    let component = dir(path);    views.push(View.create(path, component.default || component))  }  views = views.sort((x, y) => { return x.Deep > y.Deep ? 1 : -1; });  return views;}