element-ui侧边栏实现路由跳转

Element-Ui侧边栏实现路由跳转，我们就不用自己写侧边栏了，代码如下，附解释

//要实现侧边栏路由跳转，

在中需要--:default-active="this.$route.path"。用来绑定路由表

在中需要--router------或者router=true

在中的index不可缺少，为必须值，不过此处的index仅为索引，用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可

在中，index的值不可缺少，就是用这个来进行路由跳转，index的值为跳转的路径

        
后台系统后台
        
          
          
            数据统计
            用户管理
          
        
        
          

          
            企业简介
            资讯动态
            产品管理
          

        
        
          
          购买单列表
        
        
          
          收藏列表
        

      

路由表配置如下

import Vue from 'vue'
import Router from 'vue-router'
import login from '../view/login'
import index from '../view/index'
import DataCount from '../components/content/ContentRight/DataCount'
import UserManagement from '../components/content/ContentRight/UserManagement'
import ProductManagement from '../components/content/ContentRight/ProductManagement'
import CompanyInfo from '../components/content/ContentRight/CompanyInfo'
import NewsMoving from '../components/content/ContentRight/NewsMoving'
import PayList from '../components/content/ContentRight/PayList'
import CollectList from '../components/content/ContentRight/CollectList'
Vue.use(Router)

export default new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      name : "login",
      path : "/",
      component : login
    },
    {
      name : "index",
      path : "/index",
      component : index,
      children : [
        {
          name : "DataCount",
          path : "DataCount",
          component : DataCount
        },
        {
          name : "UserManagement",
          path : "UserManagement",
          component : UserManagement
        },
        {
          name : "ProductManagement",
          path : "ProductManagement",
          component : ProductManagement
        },
        {
          name : "CompanyInfo",
          path : "CompanyInfo",
          component : CompanyInfo
        },
        {
          name : "NewsMoving",
          path : "NewsMoving",
          component : NewsMoving
        },
        {
          name : "PayList",
          path : "PayList",
          component : PayList
        },
        {
          name : "CollectList",
          path : "CollectList",
          component : CollectList
        }
      ]
    }
  ]
})

最终效果如下