9.左边导航菜单

左边导航菜单制作

Element UI框架里面有NavMenu 导航菜单，有顶栏、侧栏和折叠的导航菜单，我们这次要用的是侧栏

把侧栏的标签里面的代码拷贝到标签里面，显示效果如下左侧导航栏的效果代码

<el-container>
                <el-aside width="200px">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>

我们只需要一个一级导航，两个二级导航，所以需要删掉一些代码，删掉后的代码和效果如下：

<el-container>
                <el-aside width="200px">
                    <el-menu>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>Main</el-main>
</el-container>

这两个选项点击是可以跳转到其他页面的，为了测试一个现在views文件夹里面新建两个vue组件，Test1.vue和Test2.vue，新建的vue组件不能直接跳转，还需要在router文件中的index.js文件里面导入才可以用

导航栏的点击事件

在标签里面添加 @select="menuClick" ，然后再到methods方法里面去进行处理

<el-aside width="200px">
<el-menu @select="menuClick">
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
</el-menu>
</el-aside>

methods: {
            menuClick(index,indexPath){
                console.log(index);
                console.log(indexPath);
            },
            commandHandler(cmd) {  //该方法有一个参数，cmd
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout"); //使用封装好的getRequest方法，参数写注销登录的地址
                        window.sessionStorage.removeItem("user")
                        this.$router.replace("/");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }
            }
        }

控制台输出效果如下：

完善meunClick方法

methods: {
            menuClick(index){
                this.$router.push(index)
            },
}

完善该menuClick方法之后，浏览器效果如下：点击选项1,就直接跳转到test1的单独页面，选项2也是

这时有人会说直接把App.vue里面的复制粘贴到Home.vue页面的template模板的标签里面就行了

<el-main>
       <router-view/>
</el-main>

但是运行的效果还是会跳转到单独的test1和test2页面，其实解决方法也很容易

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'
 
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
      {
        path: '/test1',
        name: 'Test1',
        component: Test1
      },
      {
        path: '/test2',
        name: 'Test2',
        component: Test2
      }
    ]
  }

还没完，还有一点小问题，新增一个页面要修改router.vue，还需要继续添加选项，这就有点麻烦

要把index.js里面的routers地址数组动态的渲染到左边的导航栏里面去

①在<el-submenu标签里面使用v-for进行遍历所有的routers地址，然后再使用v-if判断遍历后的带有hidden属性的地址需不需要隐藏起来

②在标签里面用v-for进行遍历所有的子地址

<el-menu @select="menuClick">
    <!--这个遍历拿到的是index.js里面的routers地址数组 -->
    <el-submenu index="1" v-for="(item,index) in this.$router.options.routes"
                v-if="!item.hidden" :key="index">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{item.name}}</span>
        </template>
        <el-menu-item-group>
            <!--动态显示当前栏目的子栏目内容-->
            <el-menu-item :index="child.path" v-for="(child,index) in
            item.children" :key="index">{{child.name}}</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
</el-menu>

Element UI导航栏也可以不需要使用@select="menuClick" 点击方法，可以直接加上一个router属性即可，效果同前面一样的。

下面是详细的Home.vue代码和index.js的代码

<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <div class="title">微人事</div>
                <el-dropdown class="userInfo" @command="commandHandler">
                    <!--@command="commandHandler" 点击菜单项触发的事件回调-->
                    <span class="el-dropdown-link">
    {{user.name}}<i><img :src="user.userface" alt=""></i>    <!--i标签表示目标-->
  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                        <el-dropdown-item command="setting">设置</el-dropdown-item>
                        <!--disabled:禁用的    divided:有分隔线-->
                        <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu @select="menuClick" router>
                        <!--这个遍历拿到的是index.js里面的routers地址数组 -->
                        <el-submenu index="1" v-for="(item,index) in this.$router.options.routes"
                                    v-if="!item.hidden" :key="index">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item-group>
                                <!--动态显示当前栏目的子栏目内容-->
                                <el-menu-item :index="child.path" v-for="(child,index) in
                                item.children" :key="index">{{child.name}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main><router-view/></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                //这样得到的数据是字符串，要用JSON.parse方法吧字符串转换成json数据
                user: JSON.parse(window.sessionStorage.getItem("user"))
            }
        },
        methods: {
            // menuClick(index){
            //     // console.log(index);
            //     // console.log(indexPath);
            //     this.$router.push(index)
            // },
            commandHandler(cmd) {  //该方法有一个参数，cmd
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout"); //使用封装好的getRequest方法，参数写注销登录的地址
                        window.sessionStorage.removeItem("user")
                        this.$router.replace("/");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }
            }
        }
    }
</script>

<style>
    .homeHeader {
        background-color: #409eff;
        display: flex;
        align-items: center; /*竖轴上居中*/
        justify-content: space-between; /*空白的地方在中间*/
        padding: 0 15px;
        box-sizing: border-box;
    }

    .title {
        font-size: 30px;
        font-family: 华文行楷;
        color: #ffffff;
    }

    .userInfo {
        cursor: pointer;
    }

    .el-dropdown-link img {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 8px;
    }

    .el-dropdown-link {
        display: flex;
        align-items: center;
    }
</style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Login',
        component: Login,
        hidden:true
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
        hidden:true //做个标记，然后在Home.vue里面判断
    },
    {
        path: '/home',
        name: '导航一',
        component: Home,
        children: [
            {
                path: '/test1',
                name: '选项一',
                component: Test1
            },
            {
                path: '/test2',
                name: '选项二',
                component: Test2
            }
        ]

    }

]

const router = new VueRouter({
    routes
})

export default router

9.左边导航菜单

左边导航菜单制作

继续阅读

8.Home页的Title制作和下拉菜单

30.员工管理后端

28.员工管理后端接口设计

29.员工管理前端页面

31.权限组取消所有角色所有权限的bug解决

27.登录页面增加数据加载进度条

26.操作员管理

25.部门管理

24.登录问题完善

6.前后端接口对接

5.服务端登录接口制作

4.服务端环境搭建

3.处理前端登录事件

2.登录页面制作

1.vue-cli3构建Vue项目

微人事学习笔记（持续更新）登录页面服务端登录接口制作前后端接口对接Home页面制作前后端分离权限管理思路探讨权限管理：后端接口设计基础信息设置页面