elment 结合路由配置二级导航栏

在使用 Element UI 框架时，可以通过 `el-menu` 和 `el-submenu` 组件来实现二级导航栏。同时，结合路由配置，可以实现点击菜单项时自动跳转到对应的页面。

具体实现步骤如下：

1. 在路由配置文件中，为需要显示在导航栏中的路由添加 `meta` 属性，用于指定菜单的标题和图标，例如：

{
  path: '/home',
  name: 'home',
  component: Home,
  meta: {
    title: '首页',
    icon: 'el-icon-menu'
  }
},
{
  path: '/about',
  name: 'about',
  component: About,
  meta: {
    title: '关于我们',
    icon: 'el-icon-info'
  }
}

2. 在页面中使用 `el-menu` 组件来渲染导航栏，同时使用 `v-for` 循环渲染菜单项和子菜单项：

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <el-submenu v-for="(item, index) in menuList" :key="index" :index="item.path">
      <template slot="title">
        <i :class="item.meta.icon"></i>
        <span>{{ item.meta.title }}</span>
      </template>
      <el-menu-item v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.path">{{ subItem.meta.title }}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

3. 在页面中使用 `computed` 属性获取菜单列表，并将当前路由路径赋值给 `activeIndex` 变量，以便高亮显示当前菜单项：

computed: {
  menuList() {
    return this.$router.options.routes.filter(item => item.meta && item.meta.title)
  },
  activeIndex() {
    return this.$route.path
  }
}

这样，就可以通过 Element UI 框架和路由配置来实现二级导航栏的功能了。