element多层导航菜单，实现点击左侧导航栏，右侧显示对应页面

小半 • 2023年1月18日下午6:38 • 技术随笔 • 阅读 333

前言

"点击左侧导航栏，右侧显示对应页面" 这个操作在前端开发中非常常见，那大家知道它是怎么实现的吗？今天用 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