Vue element-ui 中侧边栏实现路由跳转 el-menu

转自：https://blog.csdn.net/qq_43219422/article/details/89919619

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

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

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

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

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

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

        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
       

后台系统后台

       
         
         
            数据统计
            用户管理
         
       
       
         
 
         
            企业简介
            资讯动态
            产品管理
         
 
       
       
         
          购买单列表
       
       
         
          收藏列表
       
 
     
路由表配置如下

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
        }
      ]
    }
  ]
})
最终效果如下

--------------------- 
作者：欢先森 
来源：CSDN 
原文：https://blog.csdn.net/qq_43219422/article/details/89919619 
版权声明：本文为博主原创文章，转载请附上博文链接！