vue 右边跳转 实现左侧栏_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

版权声明：本文为博主原创文章，转载请附上博文链接！