# v2manage

**Repository Path**: weiyao11/v2manage

## Basic Information

- **Project Name**: v2manage
- **Description**: 这是使用element-UI结合Vue搭建的一个后台管理模板,结合了动态表单渲染,动态路由分离的方式进行使用
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-30
- **Last Updated**: 2021-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# v2.x-manage

#### 1. 页面展示

![](https://img-blog.csdnimg.cn/0c8d143bfc954986923c6501c9370f29.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzU1OTMw,size_16,color_FFFFFF,t_70)



![](https://img-blog.csdnimg.cn/89020eb6ed9c44118cd64a6f915b1e99.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzU1OTMw,size_16,color_FFFFFF,t_70)



#### 2.  技术栈

**Vue2.0+element UI**

采用动态router渲染的方式

菜单采用递归渲染的方式进行后端数据动态渲染

使用localStorage进行页面的模拟持续登录

模拟账号: admin，

模拟密码: admin



#### 3. 难点

##### 1. 解决Vue-Router 3.0以上的点击相同路由的报错问题

```js
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
```

##### . 解决Element UI 的菜单递归渲染的问题



```js
<template>
  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id + ''">
    <template slot="title">
      <i :class="menu.icon"></i>
      <span slot="title">{{menu.title}}</span>
    </template>
    <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
  </el-submenu>
  <el-menu-item v-else :index="menu.id + ''" @click="handleRoute(menu)">
    <i :class="menu.icon"></i>
    <span slot="title">{{menu.title}}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: 'MenuTree',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  mounted () {
    console.log(this.menu);
  },
  methods: {
    handleRoute (menu) {
      // 通过菜单URL跳转至指定路由
      // console.log(menu);
      this.$router.push(menu.url)
    }
  }
}
</script>
```

```js
      <el-menu
        default-active=""
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse-transition= "transition"
        :collapse="isCollapse"
        background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b" >
        <menu-tree v-for="item in mockJSON" :key="item.id" :menu = 'item'></menu-tree>
        </el-menu>
```

##### 3.解决子组件改变父组件的传来的props的值无法直接修改问题

```js
  // 子组件
handleCollapse () {
      let is = !this.isCollapse;
      this.$emit('isCollapseClick', is)
    },
  // 父组件      
  <Header :isCollapse="isCollapse" @isCollapseClick="handelZiCompont($event)"></Header>  
      handelZiCompont (msg) {
      this.isCollapse = msg;
    }     
```