vue動態新增路由addRoutes之不能將動態路由存入快取
在我不知道vue的路由還可以通過addRoutes動態新增時，我只知道vue的路由都是寫死在路由表中的，每當跳轉時再去載入相應的路由。直到在一個新公司接到需要根據使用者的許可權顯示不同的選單的需求時才知道了原來vue-router還有一個addRoutes的API，立馬研究了一下。
router.addRoutes：
函式簽名：
router.addRoutes(routes: Array<RouteConfig>)動態新增更多的路由規則。引數必須是一個符合routes選項要求的陣列。
白話就是需要動態加入到路由表中的路由是必須要跟我們提前寫死的路由規則是一樣的。
有了這個玩意兒我們就可以依據系統管理員給使用者分配的許可權來實現不同的使用者可以進入不同的選單頁面的功能，是不是很nice？是不是很優秀？
但這個還不是本文的重點，本文的重點是“不能將需要動態新增的路由存入快取！” 為什麼這麼說呢？
先說說我們的需求吧。
我們的專案開發中的動態路由是提前配好在路由表中的，只是和靜態路由分開寫在了兩個物件中，匯出的時候預設只匯出靜態路由，所謂的靜態路由就是所有使用者都可以訪問到的公共路由，比如登入頁面、404頁面等。而不同使用者可訪問不同的選單頁面是根據介面返回的一個選單code來過濾提前配好的動態路由(提前配好的動態路由中也有一個code)，再將過濾後的路由使用router.addRoutes
接下來就是我們專案中的路由過濾了，這裡省略1000字，路由過濾完成並動態新增後就可以很愉快的訪問選單頁面了。但我想的是，在全域性路由守衛中請求介面返回的code（這裡介面返回的是一個包含code和其他資料的json陣列，所以我還得先把介面返回的code給過濾出來），然後再過濾路由，然後再動態新增，這對效能來說是一個不小的開銷，所以我就琢磨著能不能把首次過濾好的路由給存在快取中，這樣下次就可以直接動態新增快取中的路由了，豈不是是一件很美好的事情，結果是我想錯了，你們都想錯了！
來先看看過濾後打印出來的路由吧：
再來看看從快取中讀出來的路由吧：
從兩張圖上紅色矩形圈圈可以看出，從快取中讀出來的路由資訊已經發生了改變，父路由中的render方法也沒有了（第一張圖中父路由的render方法還是有的，到了第二張就沒有了），且子路由children裡邊已經沒有了component屬性（從第二張圖中的紅色箭頭處可以看出），這顯然不是我們想要的路由資訊。有人說可以使用import xxx from ‘xxx’來替代component的值，這個針對父路由的component都引用了同一個Layout元件來說是可以的，但是子路由呢？從快取中讀出來的子路由連component都沒有了，即使是有這個屬性，但子路由都引用了不同的component，那你怎麼玩？況且將過濾後的路由資訊通過快取的存取來實現，安全上就會有問題，因為如果戶手動修改了快取裡的路由，那你所謂的動態路由許可權豈不是立馬破功了。
所以，我們能做的就只能是在每次切換路由時都要重新請求介面並根據返回的code來動態過濾路由並新增，或者根據後端返回的動態路由表直接新增，效能上浪費一點也是沒有辦法的事兒，總比實現不了或不安全來的更好一點。
寫了這麼多，如果各位前端同行看的不是很明白的話，可以自己動手嘗試一下，實踐是檢驗真理的唯一標準！