天天看點

antdesign vue 2.0 遞歸菜單_Vue 動态生成路由結構

antdesign vue 2.0 遞歸菜單_Vue 動态生成路由結構

通常我們比較常用的vue元件加載方式就是通過

import

引入檔案,如:路由懶加載 、靜态的import。

一般情況下還是推薦使用import方式引入的,因為這更容易從Tree_shaking 及一些分析工具中受益。

在一些比較特殊的場景,比如:

需要根據背景的菜單配置, 動态生成Vue路由。

假如背景傳回了以下JSON資料結構

[
    
           

一般vue路由會類似這樣定義

從JSON資料結構轉換到vue路由定義,我們隻需要進行

遞歸處理就好 。

但這裡面我們需要重點關注

component的實作
component:()=>import('@/views/redirect/index'), 
           

假如我們繼續通過import 引入元件的方式,在我們進行遞歸處理進行動态指派時,比如

component:()=>import('@/views/' + path ), 
           

會發現 import 其實是不支援動态變量的,

是以我們通過這種方式是無法正确找到路由的

require(AMD版本)

針對上面使用 import 出現無法正确找到路由的情況,我們可以通過這種方式處理。

定義loadComponent函數,将背景傳回内容處理後, 再指派給 component

const 
           

假如想加載不同檔案夾下的vue檔案, 我們需要聲明檔案目錄的字首, 不然也會報錯的

export 
           

通過這種方式改造後,Vue路由可以完全的通過背景進行控制, 如: 公用元件的參數設定、動态設定按鈕關聯元件等等

antdesign vue 2.0 遞歸菜單_Vue 動态生成路由結構

假如想通過某個按鈕點選後加載某個vue元件, 可以封裝上面的方法, 大緻如下

getComponents
           

有哪裡寫的不好或者想讨論的可以在下方 評論區跟我讨論噢

繼續閱讀