Vue 使用 Ant-d 简单实现左侧菜单栏和面包屑功能

好早就写了个案例，但是一直没时间整理，其实代码敲出来是一种学习，记录下来又是另一种学习，好好学习，天天向上！我爱学习！

我这边的左侧菜单栏是写死的，不是后台返回的动态菜单。

其实写菜单很简单，这篇博文不会写的很多，我直接把项目放到 Git 上，down下来看一下就可以了，很简单能明白。

主要是我们选择了一个菜单，然后如果我们页面刷新了，怎么保持我们打开的页面还是刷新前那个。其实也简单，就是读一下route路由。

然后再就是面包屑，这个面包屑需要和路由去配合使用，其实也简单，首先路由文件需要修改点东西，把每个页面的标题设置一下。

import Vue from "vue";
import VueRouter from "vue-router";
import hello from "../components/HelloWorld.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "hello",
    component: hello,
    redirect: '/teacher',
  },
  {
    path: "/teacher",
    component: hello,
    meta: {title: '页面'},
    redirect: '/teacher/onepage',
    children: [
      {
        path: "onepage",
        name: "one",
        meta: {title: '页面一'},
        component: () => import("../components/page01.vue")
      },
      {
        path: "twopage",
        name: "two",
        meta: {title: '页面二'},
        component: () => import("../components/page02.vue")
      },
      {
        path: "threepage",
        name: "three",
        meta: {title: '页面三'},
        component: () => import("../components/page03.vue")
      },
    ]
  },
  {
    path: "/student",
    component: hello,
    meta: {title: 'm页面'},
    redirect: '/student/monepage',
    children: [
      {
        path: "monepage",
        name: "mone",
        meta: {title: 'm页面一'},
        component: () => import("../components/mpage01.vue")
      },
      {
        path: "mtwopage",
        name: "mtwo",
        meta: {title: 'm页面二'},
        component: () => import("../components/mpage02.vue")
      }
    ]
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

就像上面那个样子。

然后就是面包屑组件需要获取这个路由名称然后渲染出来，其实很简单。

这样子就完成了左侧菜单栏和面包屑与页面的搭配。然后效果是这个样子的，简单部署了一下页面：

demo地址 ：https://gitee.com/wjw1014/vue-interface-layout