側邊菜單的實現

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}}

Ⅳ.控制臺報錯解決:

Ⅴ.側邊欄路由跳轉:

點擊跳轉的路由地址也是后臺設置好返回給我們，這個需要溝通確認好

總結

以上是生活随笔為你收集整理的vue 右边跳转 实现左侧栏_Vue 后台管理项目8-侧边菜单的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。