07 动态菜单栏

1 左侧菜单栏静态数据改为动态数据

1 后台数据

<script>
export default {
  data() {
    return {
      menuList: [
        {
          id: 1,
          title: "权限管理",
          icon: "el-icon-s-operation",
          path: "",
          component: "",
          children: [
            {
              id: 2,
              title: "用户管理",
              icon: "el-icon-user",
              path: "/sys/user",
              children: [],
            },
            {
              id: 3,
              title: "角色管理",
              icon: "el-icon-s-custom",
              path: "/sys/role",
              children: [],
            },
            {
              id: 4,
              title: "菜单管理",
              icon: "el-icon-menu",
              path: "/sys/menu",
              children: [],
            },
          ],
        },
        {
          id: 5,
          name: "SysTools",
          title: "系统工具",
          icon: "el-icon-s-tools",
          path: "",
          children: [
            {
              id: 6,
              title: "数字字典",
              icon: "el-icon-s-order",
              path: "/sys/dict",
              children: [],
            },
          ],
        },
      ],
    };
  },
};
</script>

2 遍历展示菜单

原静态菜单代码

        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
        >
          <!-- 一级菜单 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="1-1">选项1</el-menu-item>
          </el-submenu>
        </el-menu>

遍历一级菜单

 看下效果

一级菜单已出现，下来遍历二级菜单

看下效果

 接下来对菜单属性进行设置，参考官网

 设置路由跳转

左侧菜单栏完整代码如下：

 <!-- 左侧菜单栏 -->
      <el-aside width="200px">
        <!-- 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :router="true"
        >
          <!-- 遍历一级菜单 -->
          <el-submenu :index="firstMenu.id+''" v-for="firstMenu in menuList" :key="firstMenu.id">
            <template slot="title">
              <i :class="firstMenu.icon"></i>
              <span>{{firstMenu.title}}</span>
            </template>
            <!-- 遍历二级菜单,index作为path进行路由跳转 -->
            <el-menu-item :index="secondMenu.path" v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
                <i :class="secondMenu.icon"></i>
                <span>{{secondMenu.title}}</span>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

在router.js中配置用户管理的路由，页面路由全部挂载在index路由下，这样容易替换主体区的内容

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', name: 'Login', component: () => import('../views/Login.vue') },
    {
      path: '/index', 
      name: 'Index', 
      component: () => import('../views/Index.vue'), 
      children: [
        { path: '/sys/user', name: 'SysUser', component: () => import('../views/sys/user/User.vue') }
      ]
    },
  ]
})

主题区使用router-view标签显示路由的页面内容

  

 点击用户管理，效果如下

接下来，配置角色管理页面，菜单管理页面及路由

 至此，点击菜单切换页面内容初步实现