vue中侧边导航栏组件实现

Posted 2021-09-15 小生不才

导航栏的实现

这是一个基于element-ui实现的导航栏组件，最多三层数据，我们为menu添加了router属性，导航栏会根据index跳转，我们可以为index赋值路由地址，这样就可以实现路由跳转了，我们用select方法记录了index（路由值），来实现对应路由的激活。

html

<template lang="html">
  <el-container>
    <el-aside >
      <el-menu :default-active="defaultActive" @select="handleSelect" router>
        <template v-for="(aside, index) in asides">
          <!-- 一级菜单（有子菜单）-->
          <el-submenu
            v-if="aside.children && aside.children.length !== 0"
            :index="aside.path || index.toString()"
            :key="index"
          >
            <template slot="title">
              <span class="icon"></span>
              <span>{{ aside.title }}</span>
            </template>
            <!-- 遍历二级菜单容器 -->
            <div v-for="(child, order) in aside.children" :key="order">
              <!-- 判断二级菜单（没有三级菜单）-->
              <el-menu-item
                v-if="!child.children"
                :index="child.path"
                :key="index + \'-\' + order"
              >
                {{ child.title }}
              </el-menu-item>
              <!-- 判断二级菜单（有三级菜单）-->
              <el-submenu v-else :index="child.title">
                <template slot="title">
                  <span>{{ child.title }}</span>
                </template>
                <el-menu-item
                  v-for="(childs, orders) in child.children"
                  :index="childs.path"
                  :key="index + \'-\' + order + \'-\' + orders"
                >
                  {{ childs.title }}
                </el-menu-item>
              </el-submenu>
            </div>
          </el-submenu>
          <!-- 一级菜单（无子菜单）-->
          <el-menu-item
            v-else
            :index="aside.path || index.toString()"
            :key="index"
          >
            <span class="icon"></span>
            {{ aside.title }}
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
  </el-container>
</template>

js

<script>
export default {
  name: \'Aside\',
  data() {
    return {
      defaultActive:
        window.localStorage.getItem(\'activePath\') || \'/myprojiectlist\', // 对应路由激活导航栏导航，默认/myprojiectlist路由
      asides: [
        {
          title: \'项目申报\',
          children: [
            {
              title: \'省级年度重大工业项目\',
              path: \'/myprojiectlist\',
            },
            {
              title: \'3000万元以上工业项目\',
              path: \'/FiveThousandIndustries\',
            },
            {
              title: \'已取得国家、省资金支持项目\',
              children: [
                {
                  title: \'国家-工业强基\',
                  path: \'/Nationalprojectlist\',
                },
                {
                  title: \'国家-技术改造\',
                  path: \'/Provincialproject\',
                },
              ],
            },
            {
              title: \'5000万元以上储备项目\',
              path: \'/Provincereservelist\',
            },
          ],
        },
        {
          title: \'项目进度\',
          path: \'/fillInProgress\',
        },
        {
          title: \'我的咨询\',
          path: \'/Consulting\',
        },
      ],
    }
  },

  methods: {
    handleSelect(key, path) {
      console.log(key, path)
      window.localStorage.setItem(\'activePath\', key) // 用于记录激活的导航
    },
  },
}
</script>