【前端 VUE】vue Elemente-UI 管理后台自定义 导航菜单栏

记录管理后台 侧边导航栏做成通用小组件 

借助 Elemente-UI  ：侧边栏容器 <：导航菜单

创建 父组件页面

aside.vue

*（

     default-active 为当前激活菜单的 index，（设置为当前的路由名称 this.$route.fullPath）

     @select 事件为 菜单选择触发的事件 借助跳转路由 并设置 default-active 的值 

）

    
          
    


import NavMenu from '@/components/NavMenuWk'// 引入子组件

components: {
  NavMenu// 声明子组件
}
menuSelected (e) {
    // e 当前点击返回的路由
    if (this.$route.fullPath === e) return // 当前路由不做操作
    this.$store.commit('active', e)
    this.$router.push(e)
}

创建子组件页面

NavMenuWk.vue

*（

   判断当前组路由有没有子级 并判断是否显示路由 !navMenu.children&&!navMenu.hidden

   将:index="navMenu.path" 设置为路由 为menuSelected事件点击返回的参数 (:index的值只能是字符串)

   icon 为图标

   如果有子级 继续调用本身 再次进行循环

）

 设置route (可直接设置 可使用服务端接口返回 数据格式如下)

 routes: [
    {
      path: '/',
      redirect: '/article',
      hidden: true
    },
    {
      path: '/Home',
      component: Home,
      name: '文章管理',
      children: [
        {
          path: '/article',
          name: '文章管理',
          component: article,
          hidden: false
        },
        {
          path: '/compileArticle',
          name: '文章编辑',
          component: compileArticle,
          hidden: true
        }
      ]
    },
    {
      path: '/Homes',
      component: Home,
      name: '归属管理',
      children: [
        {
          path: '/affiliation',
          name: '归属管理',
          component: affiliation,
          hidden: false
        },
        {
          path: '/compileAffiliation',
          name: '归属编辑',
          component: compileAffiliation,
          hidden: true
        }
      ]
    }
  ]