vue前端菜单路由

1、引入框架

2、菜单前端代码：(直接到element上找)

(1)el-aside

①index=1：区分点击事件，以防按一个其他组件也跟着同样的操作

②submenu:一级菜单（下拉）；menu-item:二级功能按钮（无下拉） ；icon:图标样式

③index=“路径”：路由跳转，后面的class的单击时，根据路径是否被选中而设置点击时的样式

<el-aside class="home_aside" width="200px">
    <el-menu router>
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-platform"></i>宿管模块</template>
                        <el-menu-item index="/dormitoryAdminAdd" :class="$route.path=='/dormitoryAdminAdd'?'is-active':''">
                            <i class="el-icon-folder-add"></i>添加宿管
                        </el-menu-item>
                        <el-menu-item index="/dormitoryAdminManager" :class="$route.path=='/dormitoryAdminManager'?'is-active':''">
                            <i class="el-icon-document-copy"></i>宿管管理
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/absentRecord">
                            <i class="el-icon-error"></i>
                            <span slot="title">学生缺寝记录</span>
                    </el-menu-item>
     </el-menu>
</el-aside>

    (2)el-main

①第4行：根据在路由中所设置的名称name来展示当前子页面的功能标题

②router-view：点击左侧菜单后就会根据index=“/路径”，然后从router-view里抽取目标页面，在此处实现页面的切换（在el-main处展示页面）

<el-container>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view></router-view>
                </el-main>
                <el-footer class="home_footer">2022 © DORMS</el-footer>
</el-container>

3、前端部分完整代码：

<el-container class="home_container">
        <el-header class="home_header">
            <div class="home_title">DORMS宿舍管理系统-系统管理员</div>
            <div class="home_userinfoContainer">
                <el-dropdown>
                  <span class="el-dropdown-link home_userinfo">
                    {{admin.name}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>

            <el-aside class="home_aside" width="200px">

                <el-menu router>
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-platform"></i>宿管模块</template>
                        <el-menu-item index="/dormitoryAdminAdd" :class="$route.path=='/dormitoryAdminAdd'?'is-active':''">
                            <i class="el-icon-folder-add"></i>添加宿管
                        </el-menu-item>
                        <el-menu-item index="/dormitoryAdminManager" :class="$route.path=='/dormitoryAdminManager'?'is-active':''">
                            <i class="el-icon-document-copy"></i>宿管管理
                        </el-menu-item>
                    </el-submenu>

                    <el-menu-item index="/moveoutRegister">
                        <i class="el-icon-s-unfold"></i>
                        <span slot="title">学生迁出登记</span>
                    </el-menu-item>
                    
                </el-menu>

            </el-aside>

            <el-container>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view></router-view>
                </el-main>
                <el-footer class="home_footer">2022 © DORMS</el-footer>
            </el-container>

        </el-container>

    </el-container>
</template>

4、菜单路由设置（router）

以为左侧工具都是在首页的子页面中展示，所以要设置children:

{
    path: '/systemAdmin',
    name: '系统管理员',
    component: SystemAdmin,
    redirect: '/dormitoryAdminAdd',
    children:[
      {
        path: '/dormitoryAdminManager',
        name: '宿管管理',
        component: DormitoryAdminManager
      }
}