Vue从零开始开发管理系统（学习笔记第五节）

前言

---

一、配置axios拦截器

后端开发中，如果访问需要授权的API必须在请求头Authorization字段提供token。因此使用拦截器来实现：

在main.js中

axios.interceptors.request.use((config)=>{
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

二、完善导航菜单 1.获取菜单信息

写一个方法获取API中的菜单数据并保存至data数据中心中，并在生命周期开始时执行参数。

data() {
    return {
        MenuList:[]
    }
}


create(){
    this.getMenuList()    
}//生命周期开始时就执行


methods:{
    async getMenuList(){
        const {data:res} = await this.$http.get('menus')//使用get的方法
        if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.MenuList=res.data
}

2.使用两次遍历

一级菜单和二级菜单各遍历一次

     
         
             
                 
                 {{subitem.authName}} 
             
      

为菜单添加index可以解决全部展开的bug；

菜单栏中可能会存在凸起块，解决方法为在css中写"border-right: none; "；

3. 菜单自动折叠

在el-side和el-menu之间添加一个div实现按钮关闭打开折叠。

|||

//关闭动画效果

data(){
    return{
         isCollapse:false
        }
},
methods:{
    isOpen(){
        this.isCollapse=!this.isCollapse
    }