第十二课 布局后台管理页面的左侧菜单

一、编写AppNavBar页面布局,然后在菜单中绑定地址路由

<div class="navbar">
    <el-menu default-active="1" :router="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" acive-text-color="#ffd04b">
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i><span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i><span slot="title">信息管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/booktype">
            <span slot="title">类别管理</span>
          </el-menu-item>
          <el-menu-item index="/bookinfo">
            <span slot="title">信息管理</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
       <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-platform"></i><span slot="title">库存管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/kucunsearch">
           <span slot="title">库存查询</span>
          </el-menu-item>
          <el-menu-item index="/rukusearch">
            <span slot="title">入库查询</span>
          </el-menu-item>
          <el-menu-item index="/chukusearch">
            <span slot="title">出库查询</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/user">
        <i class="el-icon-s-check"></i><span slot="title">用户管理</span>
      </el-menu-item>
    </el-menu>
  </div>
  
  <style scoped>
  .el-menu{
    border-right: none;
  }
</style>

二、新建7个页面

1）/views/book/bookinfo.vue

2）/views/book/booktype.vue

3）/views/kucun/chukusearch.vue

4）/views/kucun/kucunsearch.vue

5）/views/kucun/rukusearch.vue

6）/views/user/user.vue

7）/views/home/index.vue

三、配置菜单的子路由

router/index.js

import Home from '@/views/home/index'
import Booktype from '@/views/book/booktype'
import Bookinfo from '@/views/book/bookinfo'
import Kucunsearch from '@/views/kucun/kucunsearch'
import Chukusearch from '@/views/kucun/chukusearch'
import Rukusearch from '@/views/kucun/rukusearch'
import User from '@/views/user/user'

 {
    path: '/',
    name: 'Layout',
    component: Layout,
    children:  children: [
      {
        path: "/home",
        component: Home
      },{
        path: "/booktype",
        component: Booktype
      },
      ,{
        path: "/bookinfo",
        component: Bookinfo
      },
      {
        path: "/kucunsearch",
        component: Kucunsearch
      },
      {
        path: "/chukusearch",
        component: Chukusearch
      },
      {
        path: "/rukusearch",
        component: Rukusearch
      },
      {
        path: "/user",
        component: User
      }
    ]
  }
  

在AppMain.vue中加入路由显示

<router-view></router-view>