側(cè)邊菜單的實現(xiàn)

1.餓了嗎NavMenu 導(dǎo)航菜單:

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

//html代碼

導(dǎo)航一

選項1

選項2

-->

//css代碼

.el-aside {

background-color: #545c64;

color: #333;

text-align: center;

line-height: 200px;

.el-menu-vertical-demo {

border: none;

}

//先將scoped去掉,不然權(quán)重不夠修改不了樣式

//設(shè)置折疊菜單的樣式

.el-submenu__title {

text-align: left;

}

}

2.根據(jù)接口動態(tài)生成權(quán)限菜單

Ⅰ.關(guān)于權(quán)限:

后臺會告訴你帳號對應(yīng)的菜單:調(diào)接口→拿數(shù)據(jù)→渲染頁面

調(diào)用需要授權(quán)的 API ，必須在請求頭中使用 Authorization 字段提供 token 令牌

Ⅱ.如何在axios發(fā)送請求的時候，添加配置信息https://github.com/axios/axios

//created獲取初始化數(shù)據(jù)渲染頁面

created(){

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

headers:{

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

}

}).then(res=>{

// console.log(res);

this.menuList = res.data.data;

})

}

Ⅲ.獲取到數(shù)據(jù)渲染到頁面

//JS代碼，將獲取的數(shù)據(jù)存入menuList

data(){

return{

menuList:[]

}

}

//html代碼，渲染到頁面

//index需要是累加值，如果沒設(shè)置點擊某個一級菜單，所有二級菜單都展開

{{item.authName}}

{{it.authName}}

Ⅳ.控制臺報錯解決:

Ⅴ.側(cè)邊欄路由跳轉(zhuǎn):

點擊跳轉(zhuǎn)的路由地址也是后臺設(shè)置好返回給我們，這個需要溝通確認(rèn)好

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。