原创 vue二级菜单,顶部菜单+左侧菜单
大前端
来个图先


先创建一个框架模板
Framework.vue
<template>
  <div>
    <ul class="top-menu">
      <li
        v-for="(item, index) in menus"
        :key="index"
        @click="menuHandle(index)"
        :class="index==curIndex?'active':''"
      >{{ item.name }}</li>
    </ul>
    <div>
      <div class="left-menu">
        <template v-for="(item, index) in menus">
          <ul v-if="index==curIndex" :key="index">
            <li
              v-for="(sub, subIndex) in item.children"
              :key="subIndex"
              :class="curSubIndex==subIndex?'active':''"
              @click="subMenuHandle(subIndex)"
            >{{ sub.name }}</li>
          </ul>
        </template>
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: [
        {
          name: "首页",
          path: "/home",
          children: [
            {
              name: "首页1",
              path: "/home01"
            },
            {
              name: "首页2",
              path: "/home02"
            }
          ]
        },
        {
          name: "关于",
          path: "/about",
          children: [
            {
              name: "关于1",
              path: "/about01"
            },
            {
              name: "关于2",
              path: "/about02"
            },
            {
              name: "关于3",
              path: "/about03"
            }
          ]
        },
        {
          name: "其他",
          path: "/other",
          children: [
            {
              name: "其他1",
              path: "/other01"
            },
            {
              name: "其他2",
              path: "/other02"
            },
            {
              name: "其他3",
              path: "/other03"
            }
          ]
        }
      ],
      curIndex: 0,
      curSubIndex: 0,
    };
  },
  methods: {
    //一级菜单
    menuHandle(index) {
      let curMenu = this.menus[index];
      this.$router.push(curMenu.path + curMenu.children[0].path);
      this.curIndex = index;
      this.curSubIndex = 0;
    },
    //二级菜单
    subMenuHandle(index) {
      this.curSubIndex = index;
      let curMenu = this.menus[this.curIndex];
      this.$router.push(curMenu.path + curMenu.children[index].path);
    }
  },
  created() {
    //刷新的时候菜单选中
    let curPath = this.$route.path.split("/");
    let curMenuIndex = this.menus.findIndex(item => {
      return item.path.endsWith(curPath[1]);
    })
    this.curIndex = curMenuIndex;

    let curMenu = this.menus[curMenuIndex];
    let subMenuIndex = curMenu.children.findIndex(item => {
      return item.path.endsWith(curPath[2]);
    })
    this.curSubIndex = subMenuIndex;
  },
};
</script>
<style lang="less" scoped>
body {
  margin: 0px;
  padding: 0px;
}
ul,
ul li {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.top-menu {
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  li {
    float: left;
    padding: 10px;
    cursor: pointer;
  }
  li.active {
    color: red;
  }
}
.left-menu {
  float: left;
  width: 150px;
  border-right: 1px solid #ddd;
  height: calc(100vh - 42px);
  li {
    color: #494949;
    text-decoration: none;
    cursor: pointer;
  }
  li.active {
    color: red;
  }
}

.content {
  margin-left: 150px;
  padding: 10px;
}
</style>
再定义一个二级菜单的空白过度页
FrameworkSub.vue
<template>
  <div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {

    };
  }
};
</script>
<style lang="less" scoped></style>
router.js
import Vue from "vue";
import VueRouter from "vue-router";
import DataList from "../views/DataList";
import Framework from "../views/Framework";
import FrameworkSub from "../views/FrameworkSub";
import Home01 from "../views/home/Home01";
import Home02 from "../views/home/Home02";
import Home03 from "../views/home/Home03";
import About01 from "../views/about/About01";
import About02 from "../views/about/About02";
import About03 from "../views/about/About03";
import Other01 from "../views/other/Other01";
import Other02 from "../views/other/Other02";
import Other03 from "../views/other/Other03";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: Framework,
    children: [
      {
        path: "/home",
        component: FrameworkSub,
        children: [
          //下级路由如果/开头,就要带上绝对路径,/ 从跟目录开始找
          { path: "home01", component: Home01 },
          { path: "home02", component: Home02 },
          { path: "home03", component: Home03 }
        ]
      },
      {
        path: "/about",
        component: FrameworkSub,
        children: [
          { path: "about01", component: About01 },
          { path: "about02", component: About02 },
          { path: "about03", component: About03 }
        ]
      },
      {
        path: "/other",
        component: FrameworkSub,
        children: [
          { path: "other01", component: Other01 },
          { path: "other02", component: Other02 },
          { path: "other03", component: Other03 }
        ]
      },
      { path: "/dataList", component: DataList }
    ]
  }
];

const router = new VueRouter({
  routes
});

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
};
export default router;

几个页面

页面中就是简单的几个文字标记当前页面

这样就可以实现效果拉