后台管理系统——02首页布局

续上01，接下来实现layout.vue的基本布局

layout.vue

效果：

 测试一下是否可以分开滚动

---

制作header的导航栏

 这里用到了bootstrap4中的mr-auto

添加图片：

          
            
            设置
            退出
          

把数据结构中的数据放入对应的位置上

数据结构：

 navBar: {
        active: "0",
        list: [
          {
            name: "首页",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-home",
                name: "后台首页",
                pathname: "index",
              },
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "商品",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "订单",
          },
          {
            name: "会员",
          },
          {
            name: "设置",
          },
        ],
      },

 遍历数据结构，取出中间的name

{{item.name}}

完整布局代码： 

效果：

 注意事项：

参数	说明	类型	可选值	默认值
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	—	false

事件名称	说明	回调参数
select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path

 |  在vue里是一个管道符号，前面为你要过滤的值，后面是过滤器，所谓过滤就是你筛选后的值