9.动态导航栏怎么做

就是说我们不能把导航栏写死,我们需要后端传给前端Json数据,然后举行一个遍历,最后得到一个动态的导航
雷同于如许,在data里面写一个集合,将他们共同的元素拿出来,然后遍历填入对应的位置

1. <template>
2.     <el-menu
3.             class="el-menu-vertical-demo"
4.             background-color="#545c64"
5.             text-color="#fff"
6.             active-text-color="#ffd04b"
7.     >
8.         ...
9.         <el-submenu default-active="Index" :index="menu.name" v-for="menu in menuList">
10.             <template slot="title">
11.                 <i :class="menu.icon"></i>
12.                 <span>{{menu.title}}</span>
13.             </template>
14.             <router-link :to="item.path" v-for="item in menu.children">
15.                 <el-menu-item :index="item.name">
16.                     <template slot="title">
17.                         <i :class="item.icon"></i>
18.                         <span slot="title">{{item.title}}</span>
19.                     </template>
20.                 </el-menu-item>
21.             </router-link>
22.         </el-submenu>
23.     </el-menu>
24. </template>
25. <script>
26.     export default {
27.         name: "SideMenu",
28.         data() {
29.             return {
30.                 menuList: [
31.                     {
32.                         name: 'SysManga',
33.                         title: '系统管理',
34.                         icon: 'el-icon-s-operation',
35.                         path: '',
36.                         component: '',
37.                         children: [
38.                             {
39.                                 name: 'SysUser',
40.                                 title: '用户管理',
41.                                 icon: 'el-icon-s-custom',
42.                                 path: '/sys/users',
43.                                 children: []
44.                             }
45.                         ]
46.                     },
47.                     {
48.                         name: 'SysTools',
49.                         title: '系统工具',
50.                         icon: 'el-icon-s-tools',
51.                         path: '',
52.                         children: [
53.                             {
54.                                 name: 'SysDict',
55.                                 title: '数字字典',
56.                                 icon: 'el-icon-s-order',
57.                                 path: '/sys/dicts',
58.                                 children: []
59.                             },
60.                         ]
61.                     }
62.                 ],
63.             }
64.         }
65.     }
66. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。