Vue自動化路由（基於Vue-Router）開篇
阿新 • • 發佈：2021-01-08
# vue自動化路由
好久不見~ 若羽又開篇Vue的內容了。
年初的時候釋出了第一版的`ea-router`自動化路由庫，歡迎大家安裝使用。[［Github地址］](https://github.com/WhileKing/ea-router) [［npm地址］](https://www.npmjs.com/package/ea-router)
經歷一年的使用。還是發現了不少問題和不足的地方，因此在前段時間抽空整理了所有需求並做了個規劃。併發布了一個版本。下面來看看其中的原理和實現吧。
## 前言
因為之前都是寫後端邏輯，因此接觸前端後始終不太習慣js的原生語法。更偏向於es6的`class`寫法，並且從**ECMAScript**後續的標準來看，官方也是比較推薦`class`的寫法來更好的組織程式碼，並使其具有更強的**表義性**。哈哈，當然因為更熟悉後者，所以更偏袒一點。
## 功能需求
功能主要分為兩部分：
- 路由自動化
- 服務於庫的裝飾器
路由自動化中，除了原有的**自動生成**外，還增加了另外兩個在業務中會經常使用到的功能：
1. 設定預設的Layout
2. 設定預設的404頁面
目錄中的子目錄關係，用路由中**巢狀路由**來進行表達，因此需要一個入口進行**渲染**，這就是`Layout`存在的一個意義，另外一層則是作為某個模組的通用佈局存在。
**裝飾器**主要用於補充路由相關特性，比如`vue-router`中的各種特性(**命名路由**，**別名**，**params**等等)，無縫的接入業務中。就像`vue-property-decorators`庫一樣。
## 原理
為了達成自動化路由的目的，本質就是要將路由物件按照某種特定的規則進行生成即可。那麼參考後端`MVC中的路由`以及其他前端路由框架，將需要路由的頁面按照目錄的層次結構進行組織，然後對目錄進行解析是比較通用並容易實現的。
1. 掃描目錄檔案
2. 還原目錄結構
3. 轉換為目錄物件
4. 載入介面卡（預設為`vue-router`的介面卡）
5. 介面卡將目錄物件轉換為`routes`
6. 使用`routes`
### 目錄物件
將實際的目錄結構對映成物件，下面看一個例子：
目錄結構如下：
```
views
|-- About.vue
|-- Home.vue
|-- Layout.vue
|-- user
|-- Add.vue
```
`router/index.js`程式碼如下：
```
// /src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import AutoRouteGenerator from "ea-router";
import defaultLayout from "../components/defaultLayout";
import notFoundPage from "../components/notFound";
Vue.use(VueRouter);
let generator = new AutoRouteGenerator(
require.context("../views", true, /\.vue$/)
);
generator.setDefaultLayout(defaultLayout);
generator.setNotFoundPage(notFoundPage);
const routes = generator.generate();
const router = new VueRouter({
routes
});
export default router;
```
對應`vue-router`，自動生成的路由物件會是如下形式（裡面的物件是自動生成的，匯出語句不是喔，只是為了演示）：
```
const routes = [
{
path: "/",
component: () => import("src/views/layout.vue"),
children: [
{
path: "home/:id/:name",
component: () => import("src/views/home.vue"),
props: true
},
{
path: "about",
component: () => import("src/views/about.vue")
},
{
path: "user",
component: () => import("src/components/defaultLayout.vue"),
children: [
{
path: "add",
component: () => import("src/views/user/add.vue")
}
]
}
]
},
{
path: "*",
component: () => import("src/components/notFound.vue")
}
];
export default routes;
```
因為使用的是`webpack`的`require.context`函式，但是它有一個缺陷就是掃描出來的並不是目錄原來的層次結構。而是一維的結構，因此我們首先要還原原來的層次結構，並在此基礎上封裝、解析一些必要的資訊。
### 介面卡
**適配者模式**在這個場景下非常合適，**輸入**是解析後的目錄物件，而**輸出**則是變化的。有可能是：
- `vue-router`的路由物件`routes`
- `vue-router-next`的路由物件`routes`
- 其他路由框架的路由物件
想要適配其他框架， 則只需要實現對應的介面卡並載入即可。
## 使用
目前有3個api以及5個裝飾器
api:
- [`generate`](#generate)
- [`setDefaultLayout`](#setDefaultLayout)
- [`setNotFoundPage`](#setNotFoundPage)
decorators:
- [`@RouteName`](#RouteName)
- [`@Alias`](#Alias)
- [`@Context`](#Context)
- [`@EnableProps`](#EnableProps)
- [`@Meta`](#Meta)
### `generate` api
建構函式中傳入通過`require.context`指定目錄及過濾規則, 如下例項是指定`views`目錄下所有`.vue`檔案。
路由生成的api, 呼叫此方法將生成一個對應 **路由介面卡** 生成的路由物件，目前預設內建的時基於`vue 2.x`的`vue-router`。
```
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";
Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /\.vue$/))
export default new Router({
routes: generator.generate()
})
```
那麼在 `main.js` 中，我們不用改動原有的程式碼即可直接使用：
```
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
### `setDefaultLayout` api
指定預設的`Layout.vue`，因為在大多數情況下，`Layout.vue`的內容可能都是下面這樣：
```