Vue-element简易实现后台

116 阅读1分钟

直接去element官网选择要用模板

主要逻辑代码

image.png

必须要填写:router=true 开启路由跳转

   v-for='(v,i) in list' :key='i' 一级循环
   使用axios获取到后台数据给到 data中的list,使用for遍历       
   {{v.authName}}
   一级管理显示
   
   :index="'/home/'+k.path" v-for='(k,j) in v.children' 二级循环
   循环出二级菜单的内容   k.path是我的后台返回的二级路由地址,与我配置的子路由名相对应
   {{k.authName}}
   二级管理显示(子路由功能)
   
   <router-view></router-view>
   路由显示必填否则无效

image.png

    axios获取后台数据,设置请求头,判断状态码为200时,把数据赋给list方便使用
    

image.png

image.png

简易效果图(待完善)

image.png