Vue 2.x折腾记 - (1)写一个不大靠谱的二级侧边栏

前言

本来想写个新手系列教程，发现这种东西一搜索一大把。
那就写点实战类的吧，这篇文章你能学点什么?
当然是一些常见内置指令的用法,组件过渡,遍历的思路等等

效果图

实现思路

• 过渡用css -
• 遍历循环判断(比对路由,点击的项名等)
• 增加标记位来默认展开刷新页面当前所在项
• 尽量减少DOM的改动,能用v-show的区域绝不用v-if
• 自定义菜单JSON尽量格式简洁,没有一大坨标记位这些干扰物(越简单越方便后期)

代码

菜单menuList.js

export const MENULIST = [
  {
    menuName: "客户管理",
    menuIcon: "fz-ad-icon-test",
    menuSubLink: [
      {
        menuName: "广告主",
        menuUrl: "/customer/adhost"
      },
      {
        menuName: "渠道",
        menuUrl: "/customer/channel"
      }
    ]
  },
  {
    menuName: "广告管理",
    menuIcon: "fz-ad-guanggao",
    menuSubLink: [
      {
        menuName: "广告新增",
        menuUrl: "/ad/add"
      },
      {
        menuName: "广告审核",
        menuUrl: "/ad/check"
      }
    ]
  },
  {
    menuName: "投放管理",
    menuIcon: "fz-ad-toufang",
    menuSubLink: [
      {
        menuName: "广告位",
        menuUrl: "/puton/area"
      },
      {
        menuName: "广告规格",
        menuUrl: "/puton/regular"
      }
    ]
  },
  {
    menuName: "数据统计",
    menuIcon: "fz-ad-statistics",
    menuSubLink: [
      {
        menuName: "广告主",
        menuUrl: "/status/adhost"
      },
      {
        menuName: "渠道",
        menuUrl: "/status/channel"
      }
    ]
  },
  {
    menuName: "管理者",
    menuIcon: "fz-ad-guanli",
    menuUrl: "/manager"
  },
  {
    menuName: "操作日志",
    menuIcon: "fz-ad-rizhi",
    menuUrl: "/logger"
  }
];

Sidebar.vue

总结

实际上这货就是把Admin Lte的风格用vue实现了，还有变形金刚版本,整个响应涉及几个到组件间的通讯;

就不把全部代码丢出来了,一大坨，效果是这样的