手把手教你用vue(x)写后台管理系统(二)-菜单渲染

1.顶部左侧布局

1.1菜单折叠图标

左侧菜单栏布局写好后，就要写右侧顶部布局，首先写这个图标，在element-ui中找到图标，然后在el-header标签中 (详情请见 手把手教你用vue(x)写后台管理系统(一)的页面布局)加入对应的字体图标 比如:el-icon-s-fold

<el-header class="layout-header">    
      <div class="header-left">
        <div class="collapse">
          <i class="el-icon-s-fold"></i>
        </div>
      </div>
    </el-header>

1.2 刷新图标

此外，在折叠图标的右边应有一个刷新图标，又因为这两个图标在一起，可以起一个相同的类名

		 <!-- 折叠 -->
        <div class="header-icon collapse">
          <i class="el-icon-s-fold"></i>
        </div>
        <!-- 刷新 -->
        <div class="header-icon refresh">
          <i class="el-icon-refresh"></i>
        </div>

然后加上一些样式

.header-left{
  display: flex;
  height: 100%;
  align-items:center;
}
.header-icon{
  color:#515a6e;
  width:42px;
  height: 100%;
  line-height:60px;
  text-align: center;
}
/* 鼠标放在图标上时的样式 */
.header-icon:hover{
  background:#f8f8f9;
  cursor: pointer;
}

1.3 点击图标实现菜单折叠效果

在element-ui中找到对应效果

style样式不能省

1.3.1.折叠后的宽度

先给Menu.vue中的el-menu标签加上collapse属性，表示折叠

 <el-menu collapse>

这时的页面

感觉很奇怪，宽度不太好看，这时就要在index.vue中把el-aside标签的宽度 256px 改为 auto，让他自适应

 <!-- 侧边栏容器 -->
    <el-aside class="aside" width="auto"> 
      <Menu></Menu>
      </el-aside> 

效果

不过呢，菜单折叠效果应该是 折叠后也有宽度，而上面的效果把菜单名字都覆盖了，我们就要用到它的样式了,顺便把刚才给menu标签添加的collpase 再删掉

/* :not  意思是说，当有后面括号里面的类名，宽度就不生效，没有的话生效，作用于菜单的折叠效果 */
.layout-menu:not(.el-menu--collapse) {
    width: 256px;
    min-height: 400px;
  }

再看效果
折叠前:

折叠后:

2.改变折叠的状态

2.1 给折叠添加状态效果

这是就要用到vuex相关属性了

2.1.1

在menu.vue中给menu标签绑定一个

:collapse="menuCollapse"

接着

import {mapState} from 'vuex'
export default {
  computed:{
    ...mapState(['menuCollapse'])
  }
};
</script>

还要在router/index.js中

export default new Vuex.Store({
  state: {
    menuCollapse:false    //折叠状态
  },
  mutations: {
    // setMenuCollapse(state,status){
    //   state.menuCollapse=status   或者
      toggleMenuCollapse(state){
        state.menuCollapse=!state.menuCollapse
      }
  }

效果:

勾选改变状态后

2.1.2 给折叠添加点击事件

首先要添加一个点击事件给折叠图标的div

  <!-- 折叠 -->
        <div class="header-icon collapse" @click="toggleMenuCollapse">
          <i class="el-icon-s-fold"></i>
        </div>

<script>
//引入mapMutations,
import {mapMutations} from 'vuex'

export default {
  components:{
  },
  methods:{
    ...mapMutations(['toggleMenuCollapse'])
  }
}
</script>

效果：点击折叠图标 展开，再点 合并

2.2 点击变换折叠图标

在Layout/index.vue中 两个图标，一个表示折叠，一个是展开

添加一个判断，判断图标的状态是哪个

 <!-- 折叠 -->
        <div class="header-icon collapse" @click="toggleMenuCollapse">
          <i :class="menuCollapse? 'el-icon-s-unfold' :'el-icon-s-fold' "></i>
        </div>

接着

computed:{
    ...mapState(['menuCollapse'])
  }

效果：展开时

折叠时

3.面包屑

同样是在 element-ui中找到相应的面包屑组件，复制粘贴

3.1 新建Breadcrumb.vue面包屑路由

在路由了复制粘贴，并删除不需要的代码

<template>
  <!-- 面包屑 -->
  <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="route in routes" :key="route.path">
    {
   
   { route.meta.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$route.matched;
    },
  },
  created() {
    console.log(this.$route);
  },
};
</script>
设置一下面包屑之间的距离
<style>
.bread {
  margin-left: 10px;
}
</style>

3.2 重定向(redirect)和自定义(meta)

我们点击Dashboard是应该直接进入主控台的路由，不然会显得很鸡肋，可以用自定义 meta:{}点击主控台、监控页、工作台时，面包屑显示对应的菜单名字而不是路由，所以要给它们的路由重定向 用 redirect:其它菜单栏同理修改meta和redirect

{
    path:'/dashboard',
    component:Layout,
    redirect:'./dashboard/console'  ,//重定向，
    meta:{						    //自定义
      name:'Dashboard'
    },
    children:[
      // console、monitor、workplace
      {
        path:'/dashboard/console' ,//控制台路由
        component:()=>import('@/views/Dashboard/Console'),
        meta:{
          name:'控制台'
        },
      },

      {
        path:'/dashboard/monitor' ,//监控页路由
        component:()=>import('@/views/Dashboard/Monitor'),
        meta:{
          name:'监控页'
        },
      },
      {
        path:'/dashboard/workplace' ,  // 工作台路由
        component:()=>import('@/views/Dashboard/Workplace'),
        meta:{
          name:'工作台'
        },
      }
    ]
  },

效果

4.菜单路由渲染

菜单渲染是个难点，先把菜单路由放在一起,在router/index.js中导出

export const menuRoutes=[
]

把菜单路由放进这里面【Dashboard路由和系统管理的路由】
然后

const routers=[
 ...menuRoutes,   //单独拿出来的目的是去渲染菜单,因为routes这个路由是必须要生效的，所以把...menuRoutes放在这里
]

接着，我们要把以前写在Menu.vue的部分菜单标签删掉，让他能自动渲染生成

<template>
<!-- 开启路由router模式 -->
  <el-menu
  :collapse="menuCollapse"
  :default-active="$route.fullPath"
  router  
  class="layout-menu"
  text-color="rgba(255,255,255,0.7)"
  active-text-color="#fff"
  background-color="#191a23">
    <!-- 二级菜单 利用menuRoutes来渲染对应的菜单-->
 <el-submenu  :index="parentRoute.path" v-for="parentRoute in menuRoutes" :key="parentRoute.path">
      <template v-slot:title>
        <!-- 相关图标 -->
        <!-- <i class="el-icon-s-platform"></i> -->
        <span>{
   
   {parentRoute.meta.name}}</span>
      </template>
      <template v-for="childRoute in parentRoute.children">
          <el-menu-item v-if="childRoute.meta && !childRoute.meta.hidden" :key="childRoute.path" :index="parentRoute.path + '/'+childRoute.path">
        <!-- <i class="el-icon-menu"></i> -->
        <template v-slot:title>{
   
   {childRoute.meta.name}}</template>
      </el-menu-item>
     </template>
    </el-submenu>
     </el-menu>
</template>
<script>
import {mapState} from 'vuex'
import {menuRoutes} from '@/router'       //  引入我们的菜单

export default {
  computed:{
    menuRoutes(){
      return menuRoutes
    },
    ...mapState(['menuCollapse'])
  }
};
</script>

5.最终效果图