vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄實(shí)現(xiàn)
更新時間：2022年06月20日 15:04:36 作者：鵬程933
本文主要介紹了vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
效果預(yù)覽
模擬數(shù)據(jù)
- 數(shù)據(jù)來源有很多，可以是自己寫死的，也可以是后端調(diào)用得到的，也可以從別的組件中拿到
- 這里采用從路由中拿
- 定義數(shù)據(jù)源src/router/module.js/
const Login = () => import('../views/Login/Login.vue');
const Layout = () => import('../layout/layout.vue');
const Home = () => import('../views/Home.vue');
const User = () => import('../views/About.vue');
const Avatar = () => import('../views/Users/Avatar.vue');
const Password = () => import('../views/Users/Password.vue');
const routes = [
{
path: '/',
redirect: '/home',
},
{
path: '/',
name: 'Layout',
component: Layout,
meta: {
permission: true,
},
children: [
{
path: '/home',
name: 'Home',
component: Home,
meta: {
title: '首頁',
icon: '<span class="iconfont icon-shouye"/>', // iconfont圖標(biāo)
inSide: true,
},
},
{
path: '/user',
name: 'User',
component: User,
meta: {
title: '個人中心',
icon: '<span class="iconfont icon-yonghuzhongxin1"/>',
},
children: [
{
path: '/user/avatar',
name: 'Avatar',
component: Avatar,
meta: {
title: '修改頭像',
},
children: [
{
path: '/setUp/avatar',
name: 'setUp',
component: Avatar,
meta: {
title: '暫無',
},
},
],
},
{
path: '/user/password',
name: 'Password',
component: Password,
meta: {
title: '修改密碼',
},
},
],
},
{
path: '/setUp',
name: 'SetUp',
meta: {
title: '系統(tǒng)設(shè)置',
icon: '<span class="iconfont icon-celveguanli"/>',
},
children: [
{
path: '/setUp/avatar',
name: 'setUp',
component: Avatar,
meta: {
title: '暫無',
},
},
{
path: '/setUp/avatar',
name: 'setUp',
component: Avatar,
meta: {
title: '暫無',
},
},
],
},
],
},
{
path: '/login',
name: 'Login',
component: Login,
},
];
export default routes;
遞歸實(shí)現(xiàn)導(dǎo)航欄渲染
- 對于導(dǎo)航欄渲染難點(diǎn)在于不知道有多少層級的導(dǎo)航，可能一級也可能兩級或者更多
- 為了方便采用兩個組件父組件aside.vue與子組件subAside.vue渲染導(dǎo)航
- 這時候就需要采用遞歸的方式
- 首先判斷哪些數(shù)據(jù)需要渲染，需要的拿出來
- 判斷是否有子節(jié)點(diǎn)需要渲染
- 有子節(jié)點(diǎn)，遞歸調(diào)用子組件本身
- 沒有子節(jié)點(diǎn)，返回導(dǎo)航項(xiàng)進(jìn)行渲染
父組件aside.vue
<template>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<el-radio-button :label="false">expand</el-radio-button>
<el-radio-button :label="true">collapse</el-radio-button>
</el-radio-group>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:collapse="isCollapse"
select="handleSelect"
router
unique-opened
>
<!-- 將渲染導(dǎo)航每一項(xiàng)傳給子組件渲染，item代表要渲染每一項(xiàng) -->
<SubAside :isCollapse="isCollapse" v-for="(item,index) in navs" :key="item.path" :menu="item" :index="item.path" />
</el-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import router from '../router/module';
const navs =router.filter((item) => item.meta?.permission)[0].children // 過濾拿到數(shù)據(jù)
console.log(navs);
const isCollapse = ref(true); // 是否收起，默認(rèn)不收起
</script>
<style lang="scss" scoped></style>
父組件處理后的用于渲染的數(shù)據(jù)
[
{
component: () => import('/src/views/Home.vue')
meta: {title: '首頁', icon: '<span class="iconfont icon-shouye"/>', inSide: true}
name: "Home"
path: "/home"
},
{
component: () => import('/src/views/About.vue')
meta: {title: '個人中心', icon: '<span class="iconfont icon-yonghuzhongxin1"/>'}
name: "User"
path: "/user"
chilren:[
{
children: [{…}]
component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
meta: {title: '修改頭像'}
name: "Avatar"
path: "/user/avatar"
},
{
component: () => import('/src/views/Users/Password.vue')
meta: {title: '修改密碼'}
name: "Password"
path: "/user/password"
}
]
},
{
meta: {title: '系統(tǒng)設(shè)置', icon: '<span class="iconfont icon-celveguanli"/>'}
name: "SetUp"
path: "/setUp"
chilren:[
{
component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
meta: {title: '暫無'}
name: "setUp"
path: "/setUp/avatar"
},
{
component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
meta: {title: '暫無'}
name: "setUp"
path: "/setUp/avatar"
}
]
}
]
子組件subAside.vue
<template>
<!-- 有子節(jié)點(diǎn)渲染這個 -->
<el-sub-menu :index="menu.path" v-if="menu?.children">
<template #title>
<el-icon v-html="menu?.meta.icon"></el-icon>
<span>{{menu?.meta.title}}</span>
</template>
<!-- 遞歸調(diào)用本身，該組件在index.ts中全局注冊了 -->
<SubAside v-for="item in menu.children" :menu="item" :isCollapse="isCollapse"/>
</el-sub-menu>
<!-- 沒有子節(jié)點(diǎn)渲染這個 -->
<el-menu-item v-else :index="menu?.path">
<el-icon v-html="menu?.meta.icon"></el-icon>
<span slot="title">{{menu?.meta.title}}</span>
</el-menu-item >
</template>
<script lang="ts" setup>
import { ref } from "vue"
// 拿到父組件傳入的值
defineProps({
isCollapse:Boolean,
menu:Object
})
</script>
<style lang="scss" scoped>
</style>
配置
版本
"vue": "^3.2.25", "element-plus": "^2.2.6",
main.ts中配置
import { createApp } from 'vue';
import App from './App.vue';
// import 'virtual:windi.css';
import router from './router/index';
/**
* 引入elment
*/
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import './styles/dark/css-vars.css'
// 引入 Pinia 狀態(tài)管理工具
import pinia from './stores'
const app=createApp(App)
/**
* 全局注冊組件
*/
import SubAside from './components/subAside.vue'
app.component('SubAside', SubAside)
// 注冊Element全局可用
app.use(ElementPlus).use(router).use(pinia).mount('#app');
到此這篇關(guān)于vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 Element封裝導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題2017-06-06
vscode中使用vue的一些插件總結(jié)(方便開發(fā))
對于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了基于VUE移動音樂WEBAPP跨域請求失敗的解決方法,需要的朋友可以參考下2018-01-01
這篇文章主要給大家介紹了關(guān)于vue3組件TS類型聲明的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
使用Element-UI的el-tabs組件,瀏覽器卡住了的問題及解決
這篇文章主要介紹了使用Element-UI的el-tabs組件,瀏覽器卡住了的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue如何解決兄弟組件之間傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
如何利用vue+element?ui實(shí)現(xiàn)好看的登錄界面
最近做了個最基礎(chǔ)的ElementUI登錄頁,適合新手查看,所以下面這篇文章主要給大家介紹了關(guān)于如何利用vue+element?ui實(shí)現(xiàn)好看的登錄界面的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue中的情侶屬性$dispatch和$broadcast詳解
這篇文章主要給大家介紹了關(guān)于Vue中情侶屬性$dispatch和$broadcast的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue中keep-alive、activated的探討和使用詳解
這篇文章主要介紹了vue中keep-alive、activated的探討和使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue組件中節(jié)流函數(shù)的失效的原因和解決方法
這篇文章主要介紹了vue組件中節(jié)流函數(shù)的失效和解決方法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12