vue后台管理系统最初搭建

1.建立登陆成功后的页面
2.建立data文件夹index.js文件

export const menu = [
    {
        name:"数据统计",
        path:"/index/DataStatistics"
    },
   
    {
        name:"资源管理",
        path:'',
        children:[
            {
                name:"资源类型",
                path: '/index/ResourceType',
            },
            {
                name:"资源列表",
                path: '/index/ResourceLst',
            },
            {
                name:"资源推荐",
                path: '/index/recommendation',
            },
            {
                name:"资源标签",
                path: '/index/recommentag',
            }
        ]
    },
    {
        name:"试题管理",
        path:'',
        children:[
            {
                name:"试题类型",
                path: '/index/test',
            },
            {
                name:"试题列表",
                path: '/index/Listtest',
            },
            {
                name:"试题评论",
                path: '/index/comment',
            },
        ]
    },
    {
        name:"课程资源管理",
        path:'',
        children:[
            {
                name:"课时类型管理",
                path: '/index/Courseresources',
            },
            {
                name:"课时列表管理",
                path: '/index/course_list',
            },
            {
                name:"课时详情管理",
                path: '/index/SessionDetails',
            },
        ]
    },
    {
        name:"用户管理",
        path:'',
        children:[
            {
                name:"用户列表管理",
                path: '/index/UserList',
            },
            {
                name:"留言列表管理",
                path: '/index/MessageList',
            },
         
        ]
    }
]

3.设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',

        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    {
        path: '/index',
        name: 'index',

        component: () => import(/* webpackChunkName: "about" */ '../views/index'),
        redirect: "/index/DataStatistics",
        children: [
            {
                path: '/index/DataStatistics',
                name: 'DataStatistics',

                component: () => import(/* webpackChunkName: "about" */ '../views/DataStatistics'),
            },
            {
                path: '/index/ResourceType',
                name: 'ResourceType',

                component: () => import(/* webpackChunkName: "about" */ '../views/ResourceType'),
            },
            {
                path: '/index/ResourceLst',
                name: 'ResourceLst',

                component: () => import(/* webpackChunkName: "about" */ '../views/ResourceLst'),
            },
            {
                path: '/index/recommendation',
                name: 'recommendation',

                component: () => import(/* webpackChunkName: "about" */ '../views/recommendation'),
            },
            {
                path: '/index/recommentag',
                name: 'recommentag',

                component: () => import(/* webpackChunkName: "about" */ '../views/recommentag'),
            },
            {
                path: '/index/test',
                name: 'test',

                component: () => import(/* webpackChunkName: "about" */ '../views/test'),
            },
            {
                path: '/index/Listtest',
                name: 'Listtest',

                component: () => import(/* webpackChunkName: "about" */ '../views/Listtest'),
            },
            {
                path: '/page1',
                name: 'page1',
                component: () => import(/* webpackChunkName: "about" */ '../components/page/page1'),
            },
            {
                path: '/page',
                name: 'page',
                component: () => import(/* webpackChunkName: "about" */ '../components/page/page.vue'),
            },
            {
                path: '/page2',
                name: 'page2',
                component: () => import(/* webpackChunkName: "about" */ '../components/page/page2'),
            },
            {
                path: '/index/comment',
                name: 'comment',
                component: () => import(/* webpackChunkName: "about" */ '../views/comment.vue'),
            },
            {
                path: '/index/Courseresources',
                name: 'Courseresources',
                component: () => import(/* webpackChunkName: "about" */ '../views/Courseresources.vue'),
            },
            {
                path: '/index/course_list',
                name: 'course_list',
                component: () => import(/* webpackChunkName: "about" */ '../views/course_list.vue'),
            },
            {
                path: '/index/SessionDetails',
                name: 'SessionDetails',
                component: () => import(/* webpackChunkName: "about" */ '../views/SessionDetails.vue'),
            },
            {
                path: '/index/UserList',
                name: 'UserList',
                component: () => import(/* webpackChunkName: "about" */ '../views/UserList.vue'),
            },
            {
                path: '/index/MessageList',
                name: 'MessageList',
                component: () => import(/* webpackChunkName: "about" */ '../views/MessageList.vue'),
            },
        
        ]
    }
]

const router = new VueRouter({
    routes
})

export default router

4.引入菜单

import { menu } from "../data/index";

5.在页面中使用

 <el-container>
      <el-aside width="200px">
        <el-col :span="12">
          <el-menu
            :default-active="$route.path"
            :router="true"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <div v-for="(item, index) of menu_data" :key="index">
              <el-menu-item :index="item.path" v-if="!('children' in item)">
                <i class="el-icon-setting"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
              <el-submenu v-else :index="String(index)">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    :index="item1.path"
                    v-for="(item1, index1) of item.children" :key="index1">
                   <i class="el-icon-document-remove"></i> {{ item1.name }}</el-menu-item
                  >
                </el-menu-item-group>
                <!-- <el-menu-item :index="item1.path" v-for="(item1, index1) of item.children"> 
                  <i class="el-icon-document-remove"></i> {{item1.name}}</el-menu-item> -->
              </el-submenu>
            </div>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

在这里插入代码片