當前位置:成語大全網 - 書法字典 - Vue3+elemetPlus支持動態路由和菜單管理UI框架。

Vue3+elemetPlus支持動態路由和菜單管理UI框架。

請耐心多看內容,認真看完會受益匪淺。

這是壹個基於VUECLI+Element-Plus * *的開源vue3動態路由和動態菜單開源框架。總的來說,這個項目非常好。使用它可以直接實現動態路由和菜單管理功能,實現快速開發。支持兩級菜單管理和嵌套路由管理。

“元素加”:“^1.0.2-beta.70”,

“vue”:“^3.0.0”,

“vue路由器”:“^4.0.0-0”

1,UNIUICLI 3是基於vue3的項目,與時俱進,很有時代感,緊跟vue3的腳步。

2.項目只集成了兩個必要的JavaScript庫,element-plus和vue-router,沒有集成其他的JavaScript庫。這意味著妳可以根據自己的項目需求安裝自己需要的JavaScript庫,避免項目集成庫太多帶來的麻煩。

3.強大的組件管理器。為了幫助您可視化地管理動態路線和菜單,我們內置了“組件管理”功能組件,使路線和菜單管理可視化。同時,為了更好的實現項目管理,我們在vue2版本的基礎上增加了可選的json導出功能,讓妳可以快速生成json數據,生成用戶權限路由和菜單。

4.美景框架。我們有壹個內置的後臺管理UI框架,通過它您可以快速生成和構建管理項目。當然,妳也可以構建自己喜歡的UI框架結構。

5.幹擾少。為了讓項目更純粹,給開發者更多的控制權,我們在src文件夾下新建了壹個unitui文件夾來存放我們的內置部分。為了便於啟動和理解您的項目,您可以直接清空ivews和components文件夾中的內容並重新構建您的組件,因為這些目錄中的文件並不重要。

Unituicli3之所以強大,是因為組件管理,因為它是核心組件,使得動態路由(添加、刪除、修改)、嵌套路由和菜單管理(添加、刪除、修改)可視化,支持json數據生成,使得前後臺交互成為可能。只需要將生成的json存儲在數據庫中,就可以實現權限編輯。

雖然我們盡量減少對開發者的影響,但是做壹些改變是不可避免的。

從“vue”導入{ createApp }

從“element-plus”導入ElementPlus

從'導入應用程序。/App.vue '

從'導入路由器。/路由器'

import ' @/unitui/init _ route . js '//這是為了防止刷新路由丟失。

const app = createApp(App)

app.use(ElementPlus)

app.use(路由器)。掛載(#app)

//註冊全局組件

從'導入Uicon。/unitui/sub/Uicon.vue '

app.component('Uicon ',Uicon)

如果妳不用elementPlus作為妳的UI,可以參考上面的,做適當的改動。

這是壹個全局註冊的圖標選擇器。您可以在任何組件中使用圖標選擇器,該組件安裝在main.js文件中。如果不使用element,就需要進行修改,否則可能會影響圖標選擇的功能。

真實效果

這是壹個非常重要的內置組件,主要用來模擬登錄時的操作和信息生成。它讀取位於assets/json/文件夾中的兩個json生成菜單和路由信息,json內容模擬後端返回的內容。

其中最重要的是路線的生成。登錄並路由json信息返回後,調用init_route方法。代碼如下:

init_route(route_data) {

//根據後端返回的json數據生成路由。

const init _ route _ data =[];//定義壹個路由數組來存儲生成的路由信息。

for(設索引= 0;index & lt路由_數據.長度;index++) {

//循環後端返回的json

//循環

if (route_data[index].孩子!=未定義){

//有子節點時生成路由數組的方法

init_route_data[index] = {

路徑:route_data[index]。路徑,//路由url。

名稱:route_data[index]。name,//路由名稱。

component:()= & gt;import(`@/${route_data[index])。組件} `),

//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。

元:{

//路由壹些附加信息

show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?

web _ title:route _ data[索引]。meta . web _ title//網站標題

},

子級:[] //嵌套路由

};

for(設I = 0;我& ltroute _ data[index]. children . length;i++) {

init _ route _ data[索引]。兒童[i] = {

路徑:route _ data [index]。孩子[我]。路徑,//路由url。

名稱:route _ data [index]。孩子[我]。name,//路由名稱。

component:()= & gt;import(`@/${route_data[index])。孩子[我]。組件} `),

//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。孩子[我]。component }`],resolve),//加載後端json描述的vue文件。

元:{

//路由壹些附加信息

show _ site:route _ data[索引]。孩子[我]。meta。show _ site,//是否全屏顯示?

web _ title:route _ data[索引]。孩子[我]。meta . web _ title//網站標題。

}

};

}

}否則{

//生成無子路由數組的方法

init_route_data[index] = {

路徑:route_data[index]。路徑,//路由url。

名稱:route_data[index]。name,//路由名稱。

component:()= & gt;import(`@/${route_data[index])。組件} `),

//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。

元:{

show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?

web _ title:route _ data[索引]。meta . web _ title//網站標題

}

};

//console . log(index);

}

}

//console . log(init _ route _ data);//打印生成初始化路由數組。

for(設索引= 0;index & lt路由_數據.長度;index++) {

//因為addRoutes已經被放棄,所以需要重新使用AddRoutes進行數組添加。

這個。$ router . add route(init _ route _ data[index]);//循環添加數組

}

this . init _ menu();//執行菜單生成方法

},

其他三個可以隨意修改。

在vue2的動態路由項目中,調用app.vue文件的mounted方法中的路由生成方法,可以刷新路由,防止路由丟失。但是在vue3中同樣的方式會出現異常,因為我們在添加路由之前跳轉,所以刷新後的頁面上不會有內容,所以我們在unitui文件夾中新建壹個init_route.js,在login.vue文件中寫壹些類似路由初始化的東西,然後在main.js中

Init_route.js內容

從' @/router '導入路由器

函數init_route() {

//根據後端返回的json數據生成路由。

if(session storage . getitem(" route _ data ")!= null) {

const route _ data = JSON . parse(session storage . getitem(" route _ data "));

//console . log(route _ data);

const init _ route _ data =[];//定義壹個路由數組來存儲生成的路由信息。

for(設索引= 0;index & lt路由_數據.長度;index++) {

//循環後端返回的json

//循環

if (route_data[index].孩子!=未定義){

//有子節點時生成路由數組的方法

init_route_data[index] = {

路徑:route_data[index]。路徑,//路由url。

名稱:route_data[index]。name,//路由名稱。

component:()= & gt;import(`@/${route_data[index])。組件} `),

//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。

元:{

//路由壹些附加信息

show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?

web _ title:route _ data[索引]。meta . web _ title//網站標題

},

子級:[] //嵌套路由

};

for(設I = 0;我& ltroute _ data[index]. children . length;i++) {

init _ route _ data[索引]。兒童[i] = {

路徑:route _ data [index]。孩子[我]。路徑,//路由url。

名稱:route _ data [index]。孩子[我]。name,//路由名稱。

component:()= & gt;

import(`@/${route_data[index])。孩子[我]。組件} `),

//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。孩子[我]。component }`],resolve),//加載後端json描述的vue文件。

元:{

//路由壹些附加信息

show _ site:route _ data[索引]。孩子[我]。meta。show _ site,//是否全屏顯示?

web _ title:route _ data[索引]。孩子[我]。meta . web _ title//網站標題。

}

};

}

}否則{

//生成無子路由數組的方法

init_route_data[index] = {

路徑:route_data[index]。路徑,//路由url。

名稱:route_data[index]。name,//路由名稱。

component:()= & gt;import(`@/${route_data[index])。組件} `),

//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。

元:{

show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?

web _ title:route _ data[索引]。meta . web _ title//網站標題

}

};

//console . log(index);

}

}

//console . log(init _ route _ data);//打印生成初始化路由數組。

for(設索引= 0;index & lt路由_數據.長度;index++) {

//因為addRoutes已經被放棄,所以需要重新使用AddRoutes進行數組添加。

router . add route(init _ route _ data[index]);//循環添加數組

}

//將刷新放在這裏

//console . log(' app ');

//const index = window . location . href . lastindexof(" # ")

//const URL = window . location . href . substring(index+1,window . location . href . length);

//這個。$router.push(url)

}

}

init_route()

main.js中的引用:

import ' @/unitui/init _ route . js '//這是為了防止刷新路由丟失。

至此,刷新自動初始化即可完成。

我們通過獲取meta的值來控制顯示位置。在app.vue文件中的route中顯示_site(全屏顯示0,視圖顯示1),然後用v-if控制不同router-view的顯示。

App.vue源代碼:

1.如果不喜歡我們的ui框架,需要開發新的ui,沒有ui框架的支持,組件管理的功能可能無法正常顯示(空白顯示)。您可以將文件unitui/ subadmin/ SubAdmin.vue中的樣式部分更改為:

#sub_admin_back {

寬度:100%;

/*非ui框架把高度寫成height:100 VH;*/

身高:100 VH;

背景-尺寸:封面;

位置:相對;

背景色:# ffffff

邊框-半徑:10px;

}

1,對框架的幹擾還沒有盡可能的減少,還是需要對main.js做適當的改動