使用elementui做后台管理系统①后台系统菜单②嵌套路由③重复点菜单报错问题

要理解vue中 $router和$route的区别：
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import vuex from '../views/vuex.vue'
import HelloWorld from '../components/HelloWorld.vue'

Vue.use(VueRouter)

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

  const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    redirect: '/HelloWorld'
  },
  // {
  //   path: '/',
  //   name: 'Home',
  //   redirect: '/home'
  // },
  {
    path: '/HelloWorld',
    name: 'HelloWorld',
    component: HelloWorld,
    children:[
      {
        path: '/HelloWorld/home',
        name: 'home',
        component: Home
      },
      {
        path: '/HelloWorld/about',
        name: 'about',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      {
        path: '/HelloWorld/ele_table',
        name: 'ele_table',
        component: () => import('../views/ele_table.vue')
      },
      {
        path: '/HelloWorld/vuex',
        name: 'vuex',
        component: vuex
      },
      {
        path: '/HelloWorld/tree',
        name: 'tree',
        component: () => import('../views/tree.vue')
      }
    ]
  },
  
]

const router = new VueRouter({
  routes
})

export default router

<template>
  <div class="Nav">
    <!-- <el-row class="tac">
      <el-col :span="6"> -->
        <div class="navBox">

        <div class="navTop">
          <img src="../../public/img/3.png" alt="" style="width:225px;height:200px;">
        </div>
        <div class="navBottom">
          <!-- <p>{{$route.path}}</p> -->
        <el-menu
          router
          :default-active="active"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>父子组件传值</span>
            </template>
            <el-menu-item index="/HelloWorld/home">父组件</el-menu-item>
            <el-menu-item index="/HelloWorld/about">子组件</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>管理</span>
            </template>
            <el-menu-item index="/HelloWorld/ele_table">表格拖拽</el-menu-item>
          </el-submenu>

          <el-menu-item index="/HelloWorld/vuex">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>购物车</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/HelloWorld/tree">
            <template slot="title">
              <i  class="el-icon-location"></i>
              <span>树形控件</span>
            </template>
          </el-menu-item>
        </el-menu>
        </div>
        </div>
      <!-- </el-col>
    </el-row> -->
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      active:'HelloWorld/home'
    };
  },
  mounted(){
    this.active='/HelloWorld/'+this.$route.name;
    console.log(this.active)
  },
  methods:{

  }
};
</script>

<style lang="scss" scoped>
.el-menu{
  // width: 20%;
  height: 77.5vh;
  text-align: left;
}
.Nav {
  display: flex;
}
.el-submenu .el-menu-item{
  min-width: 182px;
}
.navBottom{
  width: 100%;
}
.navBox{
  width: 20%;
}
.navTop{
  font-size: 0;
}
.main{
  width: 100%;
}
</style>

<template>
  <div class="ele_table" id="ele_table">
    <h3>表格拖拽</h3>

    <el-table :data="tableData"
      border
      row-key="id"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      
    };
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
      
      //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
    *{
        list-style: none;
    }
    .box{
        width: 100%;
        height: 500px;
        .p1{
            position: absolute;
            left: 0;
        }
        .p2{
            position: absolute;
            left: 542px;
        }
        ul{
            width:500px;
            height: 100%;
            overflow: hidden;
            display: flex;
            position: relative;
            display: flex;
            padding-left:10px;
            li{
                img{
                    width: 300px;
                    height: 300px;
                }
            }
        }
    }
</style>