vue 基于elementUi根据路由表动态加载侧边栏导航

vue 基于elementUi根据路由表动态加载侧边栏导航

在学习element-admin后，发现动态路由很有意思，打算自己重现一下动态路由功能

路由router.js:在路由中可以添加hidden字段判断该路由是否显示

const routes = [
  {
    path: '/',
    redirect: '/container',
    hidden: true//控制该路由是否显示
  },

  {
    path: '/container',
    name: 'Container',
    component: () => import('@/layout/Container'),
    hidden: true,
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/home'),
        meta: {
          title: '首页'
          ,
          icon: 'el-icon-s-tools'
        }
      },
      {
        path: '/tree',
        name: 'Tree',
        component: () => import('@/views/Tree'),
        meta: {
          title: '树',
          icon: 'el-icon-user'
        }
      },
      // 多级嵌套路由尝试
      {
        path: '/menu1',
        name: 'Menu1',
        component: () => import('@/views/menu1'),
        meta: {
          title: 'Menu1'
          ,
          icon: 'el-icon-phone'
        },
        children: [
          {
            path: '/menu1-1',
            name: 'Menu1-1',
            component: () => import('@/views/menu1/menu1-1'),
            meta: {
              title: 'Menu1-1',
              icon: 'el-icon-goods'
            },
            children: [
              {
                path: '/menu1-1-1',
                name: 'Menu1-1-1',
                component: () => import('@/views/menu1/menu1-1/menu1-1-1'),
                meta: {
                  title: 'Menu1-1-1',
                  icon: 'el-icon-success'
                },
              }
            ]
          }
        ]
      }
    ]
  },

]

SideItem.vue组件递归

<template>
  <div>
    <div v-for="(item, index) in tree" :key="index">
      <!-- hidden=true且该路由又有子路由时 直接递归进入子路由 -->
      <div v-if="item.hidden && item.children">
        <SideItem :tree="item.children"></SideItem>
      </div>
      <div v-if="!item.hidden">
        <el-submenu :index="item.path" v-if="item.children">
          <template slot="title">
            <i :class="item.meta.icon || ''"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <SideItem :tree="item.children"></SideItem>
        </el-submenu>

        <el-menu-item :index="item.path" v-if="!item.children">
          <i :class="item.meta.icon || ''"></i>
          <span slot="title">
            {{ item.meta.title }}
          </span>
        </el-menu-item>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SideItem",
  props: {
    tree: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
</style>

侧边栏SideBar.vue

<template>
  <div>
    <el-row class="tac">
      <el-col>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <SideItem :tree="routes"> </SideItem>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import SideItem from "@/components/SideItem";

export default {
  components: {
    SideItem,
  },
  data() {
    return {
      routes: [], //路由表
    };
  },
  created() {
    this.getRoutes();
  },
  mounted() {},
  methods: {
    getRoutes() {
      // 获取所有路由表
      this.routes = this.$router.options.routes;
    },
  },
  computed: {},
};
</script>
<style lang="sass" scoped>
</style>