First-level menu implements the simplest first-level menu
When implementing the code in the previous Aside.vue, the first-level menu is actually very simple. Just use el-menu and el-menu-item. The Side.vue code is as follows:
<template>
<div>
<el-menu>
<el-menu-item>一级菜单1</el-menu-item>
<el-menu-item>一级菜单2</el-menu-item>
<el-menu-item>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
</style>
The renderings are as follows:
Set menu background color and text color
Set the -color and text-color properties in el-menu
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff">
<el-menu-item>一级菜单1</el-menu-item>
<el-menu-item>一级菜单2</el-menu-item>
<el-menu-item>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
Set the menu text color after selection
Set the -text-color attribute, but the index attribute must be set in the submenu that needs to take effect, otherwise it will not take effect. Do not set the index first.
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b">
<el-menu-item>一级菜单1</el-menu-item>
<el-menu-item>一级菜单2</el-menu-item>
<el-menu-item>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
You can see that after I click, the color of the menu text does not change. Now let’s add the index attribute.
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b">
<el-menu-item index="1">一级菜单1</el-menu-item>
<el-menu-item index="2">一级菜单2</el-menu-item>
<el-menu-item index="3">一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
In the picture above, we can see that there is no selected menu at first. You can set the default selected menu by setting – to the corresponding index value. For example, I set the second menu to be selected by default, and the index of the second menu is 2. , so we add -="2" to el-menu
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2">
<el-menu-item index="1">一级菜单1</el-menu-item>
<el-menu-item index="2">一级菜单2</el-menu-item>
<el-menu-item index="3">一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
After refreshing the page, the second menu is selected by default
Add icon to menu
Adding icons to the menu will make our menu look more beautiful and comfortable. When it comes to the use of icons, you can refer to my previous article: Use of Icon in Vue Development Example (08)
Just use the i tag, add it in front of the menu name, XXX is the name of the icon.
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2">
<el-menu-item index="1"><i class="el-icon-location"></i>一级菜单1</el-menu-item>
<el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
Secondary menu implements secondary menu
Modify the first-level menu 1 to the second-level menu
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2" >
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
Modify the analysis [actually very simple]:
Change el-menu to el-button name, wrap the icon with a label, and add the slot="title" attribute, otherwise the menu style will be incorrect. Add two new el-menu-items.Three-level menu implements three-level menu
The modification method is the same as the secondary menu, that is, adding an extra layer
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
<el-submenu index="1-1">
<template slot="title"><i class="el-icon-location"></i><span>选项1</span></template>
<el-menu-item index="1-1-1">选项1-1</el-menu-item>
<el-menu-item index="1-1-2">选项1-2</el-menu-item>
</el-submenu>
<el-submenu index="1-2">
<template slot="title"><i class="el-icon-location"></i><span>选项2</span></template>
<el-menu-item index="1-2-1">选项2-1</el-menu-item>
<el-menu-item index="1-2-2">选项2-2</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
</style>
Join related events
Open open, close close, select 3 events
Add three event attributes to el-menu and write the corresponding
<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2"
@open="handleOpen"
@close="handleClose"
@select="handSelect">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
<el-submenu index="1-1">
<template slot="title"><i class="el-icon-location"></i><span>选项1</span></template>
<el-menu-item index="1-1-1">选项1-1</el-menu-item>
<el-menu-item index="1-1-2">选项1-2</el-menu-item>
</el-submenu>
<el-submenu index="1-2">
<template slot="title"><i class="el-icon-location"></i><span>选项2</span></template>
<el-menu-item index="1-2-1">选项2-1</el-menu-item>
<el-menu-item index="1-2-2">选项2-2</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside",
methods: {
handleOpen(key, keyPath) {
console.log("打开：",key, keyPath);
},
handleClose(key, keyPath) {
console.log("关闭：",key, keyPath);
},
handSelect(key, keyPath) {
console.log("选择：",key, keyPath);
}
}
}
</script>
<style scoped>
</style>
Implement click menu jump
When you click a menu item, the corresponding page can be displayed in the Main window on the right.
Create 3 pages Main1.vue Main2.vue Main2.vue
<template>
<div>
这是Main1
</div>
</template>
<script>
export default {
name: "Main1"
}
</script>
<style scoped>
</style>
<template>
<div>
这是Main2
</div>
</template>
<script>
export default {
name: "Main2"
}
</script>
<style scoped>
</style>
<template>
<div>
这是Main3
</div>
</template>
<script>
export default {
name: "Main3"
}
</script>
<style scoped>
</style>
Configure the route and create .js under src. The main route index is created, which is the three index sub-routes of the main page entered. They are used for jumps and correspond to the main1 main2 main3 pages respectively. The jump position of the sub-route is the Main position of the index, because our management system only needs the Main position to change, and the header, left navigation, and bottom do not need to be changed.
.js is as follows:
import VueRouter from "vue-router"
import Index from "./components/Index";
const routes = [
//一级路由
{
path: '/index',
name: 'index',
component: Index,
//路由嵌套
children:[
{path: '/index/menu1',component: () => import('./components/Main1.vue')},
{path: '/index/menu2',component: () => import('./components/Main2.vue')},
{path: '/index/menu3',component: () => import('./components/Main3.vue')}
]
}
]
const router = new VueRouter({
mode:'history',
routes
})
export default router;
Configure this route in main.js to make the route effective
In the original Index.vue page, set the routing jump position. Here we can modify the bit -view in the original Main position.
Add routing configuration to menu
Here we use the first-level menu, which is simple and convenient, and modify the code of Aside.vue.
Add attributes to el-menu
In the index of el-menu-item, set the corresponding sub-route
<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>
We enter the index main route
Click on the left navigation menu
Handle the case where the default Main window is empty
When we first entered index routing, we saw that there was nothing in the main window.
This obviously doesn’t look good, so we can set the default jump position as follows:
Add a new route to the sub-route for default jump. Configure the value of this sub-route in the main route.
The above is actually a redirection operation. When the index route is entered directly, it will jump to the Main route by default, so that there will be a default page.
Below we only enter index in the address bar. After pressing Enter, "/Main" will be added by default, which directly redirects. At the same time, the page in the Main window also displays the page we specified.
summary
This section summarizes "el-menu implements left menu navigation". I hope it can be helpful to everyone. Please help me [Like] + [Collect] + [Check in the comment area]. If you are interested in joining Xiao Ming, If you are learning Java, [Follow the wave] to avoid getting lost.
Please go to the bottom of the article to help [one-click three links] Thank you!
navigation
✪ Vue development instance directory general index