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 [10] Link text link ► Next [12] Realize dynamic left menu navigation
A menu
Implement the simplest first-level menu
To implement the code in the previous Aside.vue, the first-level menu is actually very simple, just use el-menu and el-menu-item directly, the Aside.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 background-color and text-color attributes 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 active-text-color attribute, but you must set the index attribute 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 the beginning, and the default selected menu can be set. Set default-active 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 default-active="2" in 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 icons to the menu
Adding icons to the menu will make our menu look more beautiful and comfortable. This involves the use of icons, you can refer to my previous article: The use of Icon icons in Vue development examples (08)
can use the i tag, in the menu Add <i class="el-icon-XXX"> before the name, where 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
Implement a 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 analysis [actually very simple]:
- Change el-menu to el-submenu
- The button name and icon are wrapped with the template tag, and the slot="title" attribute must be added, otherwise the menu style is wrong.
- Add two new el-menu-items.
Level 3 menu
Implement a three-level menu
It is the same as the modification method of the second-level menu, that is, add one more 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 select 3 events
Add three event attributes to el-menu, and write the corresponding method
<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 the menu item is clicked, 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 routing
- Create router.js under src
- The main route index is created, which is the main page to enter
- These three index sub-routes are used for jumping, corresponding to several pages of main1 main2 main3 respectively.
- The jump position of the sub-routes is the Main position of the index, because our management system only needs to change the Main position, and the head, left navigation, and bottom footer do not need to be changed.
router.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 take effect.
On the original Index.vue page, set the route jump position. Here we can modify the router-view at the original Main position.
- Add routing configuration to the menu
Here we use the first-level menu, which is simple and convenient, and modify the code of Aside.vue.
Add the router attribute in el-menu
In the index of el-menu-item, set the corresponding sub-routes
<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
and click on the left navigation menu
Handle the case where the default Main window is empty
When we first entered the index route, we saw that there was nothing in the main window
This is obviously not good-looking, so we can set the default jump position as follows:
- Add a new route in the sub-routing for the default jump
- Configure the redirect value in the main route as this sub-route
The above is actually a redirection operation. When the index route is directly entered, 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, and after pressing Enter, "/Main" will be added by default at the end, which is directly redirected, and the page in the Main window also displays the page we specified.
summary
This section summarizes "el-menu realizes left menu navigation", I hope it can be helpful to everyone, please help [Like] + [Favorite] + [Punch in the comment area] , if you are interested, join Xiao Ming Those who learn Java, [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 [10] Link text link ► Next [12] Realize dynamic left menu navigation
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
