element 多层导航菜单，让网页设计更简洁、美观

前言

在现代网站中，导航菜单是非常重要的一部分，它是用户访问网站的入口，能够直接影响用户的使用体验。而多层导航菜单，更是让网站的信息结构更加清晰明了。本文将为大家介绍如何使用 element 组件库，实现点击左侧导航栏，右侧显示对应页面。

• 文件结构如下图：

---

实现思路

其实配合 element 实现这个操作非常简单，核心在于用 :default-active 属性动态的绑定当前激活菜单的路由路径，然后通过路由嵌套的方式跳转指定路由即可。

overall/index.vue 文件代码

<template>
  <div>
    <el-container>
      <el-aside width="240px">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>工厂设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/navigator/index">商户信息</el-menu-item>
              <el-menu-item index="/navigatorTwo/index">推广团队</el-menu-item>
              <el-menu-item index="/navigatorTherr/index">插件管理</el-menu-item>
              <el-menu-item index="/navigatorFour/index">我的客户</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>头部</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  height: 100%;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  height: 100vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>

---

router/index.vue 文件代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
	path: '/',
	component: () => import('../views/overall/index.vue'),
	children: [
	    {
			path: "/navigator/index",
			component: () => import('../views/navigator/index.vue')
		},
		{
			path: "/navigatortwo/index",
			component: () => import('../views/navigatortwo/index.vue')
		},
		{
			path: "/navigatorTherr/index",
			component: () => import('../views/navigatorTherr/index.vue')
		}, {
			path: "/navigatorFour/index",
			component: () => import('../views/navigatorFour/index.vue')
		},
	]
}]

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})

export default router

---

最终效果

---

- 拓展延伸

所谓嵌套路由就是指路由里面嵌套它的子路由，可以有自己的路由导航和路由容器，通过配置 children 属性可实现多层嵌套。