获取左侧菜单

自己原本制作的接口可能不太适合此练手项目，将api地址替换掉
接口地址：https://www.liulongbin.top:8888/api/private/v1/
main.js修改

//配置axios全局使用
import axios from 'axios'
axios.defaults.baseURL='https://www.liulongbin.top:8888/api/private/v1/'

login.vue中需修改Login()函数

 Login() {
        // 预验证
        this.$refs.loginFormRef.validate(async valid => {
          //未验证通过则直接return
          if (!valid) return;
          //不加await的化不会打印出数据，await只能用于async修饰的函数
          const {data:res} = await this.$http.post('login', this.loginForm).catch(() => this.$message.error("登录失败,请联系Tel:"))
          // const response = await this.$http.post('pro/login', this.loginForm).catch(() => this.$message.error("登录失败,请联系Tel:"))
          // {data:res}解构，将得到的返回值的data解构为res
          console.log(res)
          // console.log(res.meta.statusText)
          //从res的元数据中得到返回状态
          if (res.meta.status !== 200) return this.$message.error(res.data.error);
          this.$message.success("登录成功");
          //   1，将登录成功之后的token，保存到客户端的sessionStorage(会话存储)中
          //   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
          //   1.2 token只应在当前网站打开期间生效，所以token保存在sessionStorage中
          window.sessionStorage.setItem('token', res.data.token);
          //   2，通过编程式导航跳转到后台主页。路由地址是 /home
          await this.$router.push("/home");
          
        });
      },

api文档：
取接口数据：

<script>
  export default {
    data(){
      return{
        //左侧菜单数据
        menulist:[]
      }

    },
    // created()而不是created:
    created() {
      this.getMenuList()
    },
    methods: {
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      // 获取所有的菜单导航,async和await联合使用，我的理解是同步请求数据
      async getMenuList() {
      //访问接口
        const { data: res } = await this.$http.get('menus')
        //是否取到值
        if(res.meta.status !==200) return this.$message.error(res.meta.msg)
        //this代指当前组件
        this.menulist = res.data
        //查看取到的值
        console.log(res)
        console.log(this.menulist)
      }
    }
  }
</script>

取到值后应当同步到页面中
先在data()下新建一个变量：

  data(){
      return{
        //左侧菜单数据
        menulist:[],
        iconsObj:{
          '125':'el-icon-user-solid',
          '103':'el-icon-bank-card',
          '101':'el-icon-s-shop',
          '102':'el-icon-s-order',
          '145':'el-icon-s-data',
        }
      }

    },

再修改el-menu部分，将从接口取到的值分别创建菜单选项

<!--侧边栏菜单区域-->
<!--unique-opened：	是否只保持一个子菜单的展开，此处等价于：:unique-opened="true"-->
<el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened>
          <!--一级菜单-->

          <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
            <!--一级菜单模板区域-->
            <template slot="title">
              <!--图标-->
              <i :class="iconsObj[item.id]" class="iconfont"></i>
              <!--文本-->
              <span>{{item.authName}}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
              <template slot="title">
                <!--图标-->
                <i class="el-icon-menu"></i>
                <!--文本-->
                <span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>

左侧菜单栏已做好