d2-admin-路由菜单

d2-admin 路由菜单记录

• 路由格式如下

expore const frameIn =[
  {
    path: "index",
    name: "index",
    title: "首页",
    icon: "home",
    component: _import("system/index"),
    children:[
      {
	    path: "role",
	    name: "role",
	    title: "角色管理",
	    icon: "user-circle"
    ]
  }
] 

• 在main.js中

import { frameIn } from "@/router/routes";

// 设置侧边栏菜单
this.$store.commit("d2admin/menu/asideSet", frameIn);

d2-admin 菜单渲染过程

• 在src/layout/header-aside/components/menu-side中
• 使用jsx处理渲染菜单

render(h) {
    return (
      <div class="d2-layout-header-aside-menu-side">
        <el-menu
          collapse={this.asideCollapse}
          collapseTransition={this.asideTransition}
          uniqueOpened={true}
          defaultActive={this.$route.fullPath}
          ref="menu"
          onSelect={this.handleMenuSelect}
        >
          {this.aside.map(menu => createMenu.call(this, h, menu))}
        </el-menu>
        {this.aside.length === 0 && !this.asideCollapse ? (
          <div
            class="d2-layout-header-aside-menu-empty"
            flex="dir:top main:center cross:center"
          >
            <d2-icon name="inbox"></d2-icon>
            <span>没有侧栏菜单</span>
          </div>
        ) : null}
      </div>
    );
  },
computed: {
    ...mapState("d2admin/menu", ["aside", "asideCollapse", "asideTransition"])
  },