VUE项目后台管理系统（四）左边菜单动态展示，不仅可以折叠，而且点击不同的菜单，右边展示不同的页面

def getmaenu(request):
    if request.method == 'GET':

        data = {
            "code": 200,
            "msg": '登录成功',
            "data":[{
                "id":101,
                "authNmae":"用户管理",
                "path":"shopmanager",
                "children":[
                    {
                        "id":104,
                        "authNmae": "用户列表",
                        "path": "users",
                        "children":[]
,                    }
                ]

        },
                {
                    "id": 102,
                    "authNmae": "手机管理",
                    "path": "phonemanager",
                    "children": [
                        {
                            "id": 105,
                            "authNmae": "手机列表",
                            "path": "phonelist",
                            "children": []
                            , }
                    ]

                },
                {
                    "id": 103,
                    "authNmae": "小吃管理",
                    "path": "xaiochimanager",
                    "children": [
                        {
                            "id": 106,
                            "authNmae": "小吃列表",
                            "path": "xaiochilist",
                            "children": []
                            , }
                    ]

                },

            ],
            "meta":{
                "msg":"获取列表成功",
                "status":200
            }

        }
        resp = JsonResponse(data)
        return resp


    else:
        return HttpResponse(json.dumps("登录失败", ensure_ascii=False), content_type='application/json')

  <!-- 左边菜单 -->
          <el-aside :width="sfzk?'64px':'200px'">
<!-- 收起左边菜单 -->
            <div style="color:#fff;background: rgb(74, 80, 100);cursor: pointer;" @click="sfzk=!sfzk">|||</div>


            


              <!--  这个里面写这个菜单栏的各种各样的属性
              background-color  这个属性是设置左边菜单的背景色
               text-color    一级菜单的字的颜色
               default-active  菜单的属性有个index属性，这个值就是那个
               前面有冒号   是动态绑定
               router  是否使用 vue-router 的模式，
               启用该模式会在激活导航时以 index 作为 path 进行路由跳转
              -->
                  <el-menu  
                        :default-active= "activePath"
                        class="el-menu-vertical-demo"
                        background-color="rgb(51, 55, 68)"
                        text-color="white"
                        active-text-color="#409EFF"
                        :unique-opened= "true"
                        :router= "true"
                        :collapse= "sfzk"
                        :collapse-transition= "false"
                        
                       >
                        <!-- 一级导航   先遍历第一层数据-->
                        <el-submenu :index= "item.id+''"  v-for="item in menuList" :key="item.id" >
                          <template slot="title">
                            <i :class="objIcon[item.id]"></i>
                            <span>{{item.authNmae}}</span>
                          </template>
                          <!-- 二级导航  将第一层数据里面的子级拿出来之后，进行遍历
                          属性前面加冒号是动态绑定
                          动态绑定值和等号之间要空一格，这样颜色就会变为黄色
                          -->
                           <el-menu-item :index= "item2.path"  v-for="item2 in item.children" :key="item2.id" @click="changeActive('/'+item2.path)">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item2.authNmae}}</span>
                          </el-menu-item>
                       </el-submenu>
                  </el-menu>


            </el-aside>

  <!-- 一级导航   先遍历第一层数据-->
                        <el-submenu :index= "item.id+''"  v-for="item in menuList" :key="item.id" >
                          <template slot="title">
                            <i :class="objIcon[item.id]"></i>
                            <span>{{item.authNmae}}</span>
                          </template>
                          <!-- 二级导航  将第一层数据里面的子级拿出来之后，进行遍历
                          属性前面加冒号是动态绑定
                          动态绑定值和等号之间要空一格，这样颜色就会变为黄色
                          -->
                           <el-menu-item :index= "item2.path"  v-for="item2 in item.children" :key="item2.id" @click="changeActive('/'+item2.path)">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item2.authNmae}}</span>
                          </el-menu-item>
                       </el-submenu>

  <div style="color:#fff;background: rgb(74, 80, 100);cursor: pointer;" 
  @click="sfzk=!sfzk">|||</div>