About the Author
Author name: Programming Ming Ming Shiyin
Introduction: CSDN blog expert, has been engaged in software development for many years, proficient in Java, JavaScript, bloggers also learn and grow step by step from scratch, know the importance of learning and accumulation, and like to play with the majority of ADCs Wild Upgrade, welcome your attention, and look forward to learning, growing, and taking off with you!
introduction
Vue is one of the most popular front-end frameworks. As a front-end developer, you should master it proficiently. If you plan to learn the development process of Vue, then come on, Brother Ming will take you to get started quickly and take you to fly!
Even if you are not a front-end developer, it is necessary to have a certain understanding of the front-end development process. No one is sure whether the company will let me do the front-end in the future. It does not take a lot of time to do some simple examples. It can improve your self-confidence and sense of accomplishment, so follow Brother Ming, there is nothing wrong, come on!
navigation
✪ General index of Vue development example directory ◄ Previous [11] el-tree realizes left menu navigation ► Next [13] Installation and use of axios and mockjs
overview
In the previous section, el-menu was used to implement the left menu, but in the project, it is more common to store the menu in the database in the background, and determine the appearance of the menu by returning data, instead of controlling the menu by the front end So this section will implement dynamic menu navigation and generate menu navigation based on background data.
Aside.vue code in the previous section
<template>
<div style="height: 100%;">
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" class="el-menu-vertical-demo"
router>
<el-menu-item index="/index/menu1"><i class="el-icon-location"></i>一级菜单1</el-menu-item>
<el-menu-item index="/index/menu2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="/index/menu3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
.el-menu-vertical-demo{
height: 100%;
}
</style>
The effect is as follows:
A menu
Analyze the above code, where the code <el-menu-item index="/index/menu1">Level 1 menu 1</el-menu-item>
is relatively similar, with 3 differences:
- index indicates the path of the route
- the name of the icon
- the name of the menu
Based on the above differences, we can consider setting up an array whose elements include routing path, icon name, menu name and other attributes, and then output the menu in a circular manner.
- Create menu data
<script>
export default {
name: "Aside",
data(){
return {
menu_data:[
{
name:'一级菜单1',
icon:'el-icon-location',
path:'/index/menu1'
},
{
name:'一级菜单2',
icon:'el-icon-document',
path:'/index/menu2'
},
{
name:'一级菜单3',
icon:'el-icon-setting',
path:'/index/menu3'
}
]
}
}
}
</script>
The menu data menu_data contains 3 elements, and each element has name, icon, and path attributes respectively. These three attributes correspond to the menu name, icon, and route path respectively.
- modify page code
Use v-for to loop menu_data and fill in the corresponding attributes.
<template>
<div style="height: 100%;">
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" class="el-menu-vertical-demo"
router>
<el-menu-item :index="item.path" v-for="item in menu_data" :key="item.name">
<i :class="item.icon"></i>{
{
item.name}}
</el-menu-item>
</el-menu>
</div>
</template>
Secondary menu
Add the child attribute to the data object of the first-level menu. This attribute is the same as the current menu data menu_data.
child is also an array containing multiple elements. Each element has name, icon, and path attributes. These three attributes Corresponding to the menu name, icon, and routing path respectively.
data:
<script>
export default {
name: "Aside",
data(){
return {
menu_data:[
{
name:'一级菜单1',
icon:'el-icon-location',
path:'/index/menu1',
child:[
{
name:'二级菜单1-1',
icon:'el-icon-user',
path:'/index/menu11'
},
{
name:'二级菜单1-2',
icon:'el-icon-user-solid',
path:'/index/menu12'
}
]
},
{
name:'一级菜单2',
icon:'el-icon-document',
path:'/index/menu2',
child:[
{
name:'二级菜单2-1',
icon:'el-icon-star-on',
path:'/index/menu21'
},
{
name:'二级菜单2-2',
icon:'el-icon-star-off',
path:'/index/menu22'
}
]
},
{
name:'一级菜单3',
icon:'el-icon-setting',
path:'/index/menu3',
child:[
{
name:'二级菜单3-1',
icon:'el-icon-s-help',
path:'/index/menu31'
},
{
name:'二级菜单3-2',
icon:'el-icon-help',
path:'/index/menu32'
}
]
}
]
}
}
}
</script>
Modify the page code:
<template>
<div style="height: 100%;">
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" class="el-menu-vertical-demo"
router>
<!-- <el-menu-item :index="item.path" v-for="item in menu_data" :key="item.name">
<i :class="item.icon"></i>{
{
item.name}}
</el-menu-item>-->
<el-submenu :index="item.path" v-for="item in menu_data" :key="item.name">
<template slot="title"><i :class="item.icon"></i><span>{
{
item.name}}</span></template>
<el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
<i :class="child.icon"></i>{
{
child.name}}
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
Page effect:
summary
This section summarizes "Implementing dynamic left menu navigation", I hope it can be helpful to everyone, please help [Like] + [Favorite] + [Punch in the comment area] If you are interested in learning Java with Brother Xiaoming And the front end, [follow a wave] Don't get lost.
Please go to the bottom of the article to help [One-click three links] Thank you!
navigation
✪ General index of Vue development example directory ◄ Previous [11] el-tree realizes left menu navigation ► Next [13] Installation and use of axios and mockjs
Popular column recommendation
【1】Java mini-games (Tetris, Plants vs. Zombies, etc.) 【
2】JavaWeb project combat (library management, dormitory management, etc.)
【3】JavaScript wonderful examples (aircraft wars, verification codes, etc.)
200 cases
[5] Learn Java from zero, learn Java with fun
[6] IDEA from zero to proficient
