vue 右边跳转 实现左侧栏_Vue 后台管理项目8-侧边菜单的实现

侧边菜单的实现

1.饿了吗NavMenu 导航菜单:

http://element.eleme.io/#/zh-CN/component/menu

//html代码

导航一

选项1

选项2

-->

//css代码

.el-aside {

background-color: #545c64;

color: #333;

text-align: center;

line-height: 200px;

.el-menu-vertical-demo {

border: none;

}

//先将scoped去掉,不然权重不够修改不了样式

//设置折叠菜单的样式

.el-submenu__title {

text-align: left;

}

}

2.根据接口动态生成权限菜单

Ⅰ.关于权限:

后台会告诉你帐号对应的菜单:调接口→拿数据→渲染页面

调用需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌

Ⅱ.如何在axios发送请求的时候，添加配置信息https://github.com/axios/axios

//created获取初始化数据渲染页面

created(){

this.$axios.get('menus',{

headers:{

Authorization:window.sessionStorage.getItem('token')

}

}).then(res=>{

// console.log(res);

this.menuList = res.data.data;

})

}

Ⅲ.获取到数据渲染到页面

//JS代码，将获取的数据存入menuList

data(){

return{

menuList:[]

}

}

//html代码，渲染到页面

//index需要是累加值，如果没设置点击某个一级菜单，所有二级菜单都展开

{{item.authName}}

{{it.authName}}

Ⅳ.控制台报错解决:

Ⅴ.侧边栏路由跳转:

点击跳转的路由地址也是后台设置好返回给我们，这个需要沟通确认好