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需要是累加值，如果没设置点击某个一级菜单，所有二级菜单都展开

Ⅳ.控制台报错解决:

Ⅴ.侧边栏路由跳转:

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

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

Vue路由跳转时导航栏更新
Vue路由跳转时导航栏更新问题描述在调用函数中跳转路由,但是侧边栏没有更新激活的高亮状态排查查看路由跳转后,侧边栏中active_index的session储存正常由于侧边栏由组件引入,所以 ...
vue考试系统后台管理项目-登录、记住密码功能
考试系统后台管理项目介绍: 技术选型:Vue2.0+Elemenu-ui 项目功能介绍: 账户信息模块:菜单权限.角色权限设置.角色权限分配.账号设置.公司分组考试管理模块:新增/编辑/删除考试试题 ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
一个基于 Go+Vue 实现的 openLDAP 后台管理项目
[公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是章鱼猫. 今天给大家推荐的这个开源你项目来自于读者的投稿.还挺不错的,分享给大家. 这个开源项目是基于Go+ ...
vue考试系统后台管理项目-接口封装调用
上一篇文章 : vue考试系统后台管理项目-登录.记住密码功能_船长在船上的博客-CSDN博客考试系统后台管理项目介绍: 技术选型:Vue2.0+Element-ui 项目功能介绍: 账户信息模块: ...
从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
往期从0到1完成一个Vue后台管理项目(一.创建项目) 从0到1完成一个Vue后台管理项目(二.使用element-ui) 从0到1完成一个Vue后台管理项目(三.使用SCSS/LESS,安装图标库 ...
尚品汇后台管理项目（Vue）
简介 1:什么是后台管理系统项目? 注意:前端领域当中,开发后台管理系统项目,并非是java.php等后台语言项目. 在前面课程当中,我们已经开发了一个项目[尚品汇电商平台项目],这个项目主要针对的是 ...
前后端分离后台管理项目（springboot+mybatis+vue）
[实例简介] 前端采用Vue.Element UI. 后端采用Spring Boot.Spring Security.Redis & Jwt. 权限认证使用Jwt,支持多终端认证系统. 支持加 ...
b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）
说明: 此项目中使用的是本地SQL数据库,Vue2. 其他功能请见本人后续的其他相关文章. 本文内容实现的最终效果如下图: e.g.点击二级菜单用户列表,就会跳转到用户列表对应的index的地址(用户 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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