vue3+Element采用递归调用封装导航栏

vue3+Element采用递归调用封装导航栏

效果预览


模拟数据

• 数据来源有很多，可以是自己写死的，也可以是后端调用得到的，也可以从别的组件中拿到
  
• 这里采用从路由中拿
  
• 定义数据源src/router/module.js/
  

1. const Login = () => import('../views/Login/Login.vue');
2. const Layout = () => import('../layout/layout.vue');
3. const Home = () => import('../views/Home.vue');
4. const User = () => import('../views/About.vue');
5. const Avatar = () => import('../views/Users/Avatar.vue');
6. const Password = () => import('../views/Users/Password.vue');
8. const routes = [
9.   {
10.     path: '/',
11.     redirect: '/home',
12.   },
13.   {
14.     path: '/',
15.     name: 'Layout',
16.     component: Layout,
17.     meta: {
18.       permission: true,
19.     },
20.     children: [
21.       {
22.         path: '/home',
23.         name: 'Home',
24.         component: Home,
25.         meta: {
26.           title: '首页',
27.           icon: '', // iconfont图标
28.           inSide: true,
29.         },
30.       },
31.       {
32.         path: '/user',
33.         name: 'User',
34.         component: User,
35.         meta: {
36.           title: '个人中心',
37.           icon: '',
38.         },
39.         children: [
40.           {
41.             path: '/user/avatar',
42.             name: 'Avatar',
43.             component: Avatar,
44.             meta: {
45.               title: '修改头像',
46.             },
47.             children: [
48.               {
49.                 path: '/setUp/avatar',
50.                 name: 'setUp',
51.                 component: Avatar,
52.                 meta: {
53.                   title: '暂无',
54.                 },
55.               },
56.             ],
57.           },
58.           {
59.             path: '/user/password',
60.             name: 'Password',
61.             component: Password,
62.             meta: {
63.               title: '修改密码',
64.             },
65.           },
66.         ],
67.       },
68.       {
69.         path: '/setUp',
70.         name: 'SetUp',
71.         meta: {
72.           title: '系统设置',
73.           icon: '',
74.         },
75.         children: [
76.           {
77.             path: '/setUp/avatar',
78.             name: 'setUp',
79.             component: Avatar,
80.             meta: {
81.               title: '暂无',
82.             },
83.           },
84.           {
85.             path: '/setUp/avatar',
86.             name: 'setUp',
87.             component: Avatar,
88.             meta: {
89.               title: '暂无',
90.             },
91.           },
92.         ],
93.       },
94.     ],
95.   },
97.   {
98.     path: '/login',
99.     name: 'Login',
100.     component: Login,
101.   },
102. ];
103. export default routes;

复制代码

递归实现导航栏渲染

• 对于导航栏渲染难点在于不知道有多少层级的导航，可能一级也可能两级或者更多
  
• 为了方便采用两个组件父组件aside.vue与子组件subAside.vue渲染导航
  
• 这时候就需要采用递归的方式
  
  
  
  • 首先判断哪些数据需要渲染，需要的拿出来
    
  • 判断是否有子节点需要渲染
    
    
    
    • 有子节点，递归调用子组件本身
      
    • 没有子节点，返回导航项进行渲染
      
    
    
  
  

父组件aside.vue

1. <template>
2.   <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
3.     <el-radio-button :label="false">expand</el-radio-button>
4.     <el-radio-button :label="true">collapse</el-radio-button>
5.   </el-radio-group>
6.   <el-menu
7.       default-active="2"
8.       class="el-menu-vertical-demo"
9.       :collapse="isCollapse"
10.       select="handleSelect"
11.       router
12.       unique-opened
13.   >
14.    
15.     <SubAside :isCollapse="isCollapse" v-for="(item,index) in navs" :key="item.path" :menu="item" :index="item.path" />
16.   </el-menu>
18. </template>

复制代码

父组件处理后的用于渲染的数据

1. [
2.         {
3.                 component: () => import('/src/views/Home.vue')
4.                 meta: {title: '首页', icon: '', inSide: true}
5.                 name: "Home"
6.                 path: "/home"
7.         },
8.         {
9.                 component: () => import('/src/views/About.vue')
10.                 meta: {title: '个人中心', icon: ''}
11.                 name: "User"
12.                 path: "/user"
13.                 chilren:[
14.                 {
15.                         children: [{…}]
16.                         component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
17.                         meta: {title: '修改头像'}
18.                         name: "Avatar"
19.                         path: "/user/avatar"
20.                 },
21.                 {
22.                         component: () => import('/src/views/Users/Password.vue')
23.                         meta: {title: '修改密码'}
24.                         name: "Password"
25.                         path: "/user/password"
26.                 }
27.                 ]
28.         },
29.         {
30.                 meta: {title: '系统设置', icon: ''}
31.                 name: "SetUp"
32.                 path: "/setUp"
33.                 chilren:[
34.                 {
35.                         component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
36.                         meta: {title: '暂无'}
37.                         name: "setUp"
38.                         path: "/setUp/avatar"
39.                 },
40.                 {
41.                         component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
42.                         meta: {title: '暂无'}
43.                         name: "setUp"
44.                         path: "/setUp/avatar"
45.                 }
46.                 ]
47.         }
48. ]

复制代码

子组件subAside.vue

1. <template>
2.    
3.     <el-sub-menu :index="menu.path" v-if="menu?.children">
4.         <template #title>
5.             <el-icon v-html="menu?.meta.icon"></el-icon>
6.             {{menu?.meta.title}}
7.         </template>
8.         
9.         <SubAside v-for="item in menu.children" :menu="item" :isCollapse="isCollapse"/>
10.     </el-sub-menu>
11.    
12.     <el-menu-item  v-else  :index="menu?.path">
13.             <el-icon v-html="menu?.meta.icon"></el-icon>
14.             {{menu?.meta.title}}
15.     </el-menu-item >
16.   
17. </template>
18.    

复制代码

配置

• 版本
  

1. "vue": "^3.2.25",
2. "element-plus": "^2.2.6",

复制代码

• main.ts中配置
  

1. import { createApp } from 'vue';
2. import App from './App.vue';
3. // import 'virtual:windi.css';
4. import router from './router/index';
5. /**
6. * 引入elment
7. */
8. import ElementPlus from 'element-plus'
9. import 'element-plus/dist/index.css'
10. import 'element-plus/theme-chalk/dark/css-vars.css'
11. import './styles/dark/css-vars.css'
14. // 引入 Pinia 状态管理工具
15. import pinia from './stores'
17. const app=createApp(App)
18. /**
19.   * 全局注册组件
20.   */
21. import SubAside from './components/subAside.vue'
22. app.component('SubAside', SubAside)
25. // 注册Element全局可用
26. app.use(ElementPlus).use(router).use(pinia).mount('#app');

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！