哔哩哔哩Allen前端vue后台管理系统笔记

杨白鹤

已于 2023-01-12 14:21:35 修改

阅读量1.9k

点赞数 11

分类专栏：哔哩哔哩视频的笔记前端文章标签： vue.js 前端 javascript

于 2023-01-09 20:50:53 首次发布

本文链接：https://blog.csdn.net/weixin_59820248/article/details/128590099

版权

哔哩哔哩Allen前端vue后台管理系统笔记

Element ui 引入
- 全局引入
- 按需引入
嵌套路由
左侧菜单栏的样式
首页
面包屑
tag
用户管理
权限管理

Element ui 引入

全局引入

npm i element-ui -S

在main.js文件里
在这里插入图片描述

按需引入

安装 babel-plugin-component：

npm i element-ui -S
npm install babel-plugin-component -D

在main.js文件里

在这里插入图片描述
在babel.config.js文件里

嵌套路由

在这里插入图片描述

左侧菜单栏的样式

在这里插入图片描述

Container布局，左侧菜单栏commonAside组件

main.vue配置的是整体的样式，用的是Container布局容器里的组件
在这里插入图片描述
el-main这块是子路由的路由出口，el-aside这块是放左侧菜单栏的组件

commonAside菜单

导航菜单，因为后续会有折叠功能，所以用的是这个
在这里插入图片描述
导航菜单的话分为有子菜单的一部分，和没有子菜单的一部分，所以给menuData里的数据(后续可能会改成接口)写了个计算方法，用到了es6的filter，noChildren就把menuData里没有children的给过滤出来，所以是!item.children，给item.children取反，hasChildren就把有children的给过滤出来。
在组件里就用对应的方法来v-for遍历。
icon这里运用到了es6的模板字符串

模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来

具体代码：

<template>
  <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
  <h3>通用后台管理系统</h3>
    <!-- 没有子菜单,对noChildren进行遍历, item表示当前的每一项,key用于添加标记当前元素的唯一性,固定且不变的值.-->
    <!-- index="2",element-ui里表示,也是唯一表示的意思 . 给它加个唯一标识,和key一样-->
    <el-menu-item
      v-for="item in noChildren"
      :key="item.name"
      :index="item.name"
    >
      <!-- i标签的class展示的是图标,图标根据menuData来展示,所以可以用es6的模板字符串来拼接渲染 -->
      <i :class="`el-icon-${item.icon}`"></i>
      <span slot="title">{
   {
    item.label }}</span>
    </el-menu-item>
    <!--有子菜单,对hasChildren进行遍历,这里为什么用label呢,因为在"其他"数据里没有name,所以用label -->
    <el-submenu
      v-for="item in hasChildren"
      :key="item.label"
      :index="item.label"
    >
      <template slot="title">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{
   {
    item.label }}</span>
      </template>
      <!-- 有子菜单的children ,对item.children进行遍历 -->
      <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
        <el-menu-item :index="subItem.name">{
   {
    subItem.label }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
   
  width: 200px;
  min-height: 400px;
}
.el-menu{
   
    height: 100vh;
    h3{
   
        color: white;
        text-align: center;
        line-height: 48px;
        font-size: 16px;
        font-weight: 400;
    }
}

</style>

<script>
export default {
   
  name: "commonAside",
  data() {
   
    return {
   
      isCollapse: false,
      menuData: [
        {
   
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
   
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
   
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
   
          label: "其他",
          icon: "location",
          children: [
            {
   
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
   
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ],
    };
  },
  methods: {
   
    handleOpen(key, keyPath) {
   
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
   
      console.log(key, keyPath);
    },
  },
  //计算属性,过滤数据,一种没有子菜单,一种有子菜单
  computed: {
   
    //没有子菜单
    noChildren() {
   
      //filter:接收一个函数作为参数,对menuData进行遍历,item会拿到其中的某一项,来根据true或false来判断当前的数据是否返回.
      return this.menuData.filter((item) => !item.children);
    },
    //有子菜单
    hasChildren() {
   
      return this.menuData.filter((item) => item.children);
    },
  },
};
</script>

菜单跳转功能

根据menuData里的path，在路由文件里配置路由
在这里插入图片描述
在commonAside组件里，写上click事件，当点击菜单的时候，跳转到对应的页面

重复跳转报错问题解决

//点击菜单 根据menuData里的path来跳转,所以要传入一个参数
    clickMenu(item){
   
        //判断页面的路由与跳转的路由是否一致,不一致才允许跳转
        if(this.$route.path != item.path && !(this.$route.path === '/home' && (item.path === '/'))){
   
            this.$router.push(item.path)
        }
        // this.$router.push(item.path)
    }