转自：https://blog.csdn.net/qq_43219422/article/details/89919619
Element-Ui侧边栏实现路由跳转，我们就不用自己写侧边栏了，代码如下，附解释
//要实现侧边栏路由跳转，
在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表
在<el-menu>中需要--router------或者router=true
在<el-submenu>中的index不可缺少，为必须值，不过此处的index仅为索引，用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可
在<el-menu-item>中，index的值不可缺少，就是用这个来进行路由跳转，index的值为跳转的路径
<el-menu :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 > <h3>后台系统后台</h3> <el-submenu index="1"> <template slot="title"> <i class="el-icon-s-custom"></i> <span>用户分析</span> </template> <el-menu-item-group> <el-menu-item index="/index/DataCount">数据统计</el-menu-item> <el-menu-item index="/index/UserManagement">用户管理</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-upload"></i> <span>资料上传</span> </template> <el-menu-item-group> <el-menu-item index="/index/CompanyInfo">企业简介</el-menu-item> <el-menu-item index="/index/NewsMoving">资讯动态</el-menu-item> <el-menu-item index="/index/ProductManagement">产品管理</el-menu-item> </el-menu-item-group> </el-submenu> <el-menu-item index="/index/PayList"> <i class="el-icon-document"></i> <span slot="title">购买单列表</span> </el-menu-item> <el-menu-item index="/index/CollectList"> <i class="el-icon-star-on"></i> <span slot="title">收藏列表</span> </el-menu-item> </el-menu> 路由表配置如下
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 } ] } ] }) 最终效果如下
--------------------- 作者：欢先森 来源： 原文：https://blog.csdn.net/qq_43219422/article/details/89919619 版权声明：本文为博主原创文章，转载请附上博文链接！
