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

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

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

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

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

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

<template>
    <div class="side">
      <a-menu
        :default-selected-keys="[this.$route.path.split('/')[2]]"
        :default-open-keys="[this.$route.path.split('/')[1]]"
        mode="inline"
        theme="light"
      >
        <a-sub-menu key="teacher">
          <span slot="title">
            <a-icon type="mail" />
            <span>页面</span>
          </span>
          <a-menu-item key="onepage">
            <router-link to="/teacher/onepage">页面一</router-link>
          </a-menu-item>
          <a-menu-item key="twopage">
            <router-link to="/teacher/twopage">页面二</router-link>
          </a-menu-item>
          <a-menu-item key="threepage">
            <router-link to="/teacher/threepage">页面三</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="student">
          <span slot="title">
            <a-icon type="appstore" />
            <span>m页面</span>
          </span>
          <a-menu-item key="monepage">
            <router-link to="/student/monepage">m页面一</router-link>
          </a-menu-item>
          <a-menu-item key="mtwopage">
            <router-link to="/student/mtwopage">m页面二</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
  .ant-menu-inline{
    border: none;
  }
</style>

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

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;

就像上面那个样子。

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

<template>
  <div class="bao">
    <a-breadcrumb separator='>'>
      <a-breadcrumb-item v-for="(item,index) of $route.matched" :key="index" style="padding:5px">
        <router-link :to="item.path" style="font-size:18px">{{item.meta.title}}</router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
    watch :{
        '$route':'init'
    },
    mounted(){
        console.log(this.$route)
    },
    methods:{
        init(){
            console.log(this.$route)
        }
    }
    
};
</script>

<style scoped>
.bao{
   background-color: #fff;
   padding: 5px 0px;
   margin-bottom: 20px;
   border:1px solid #dddddd;
   padding-left: 10px;
   border-radius: 10px;
}
</style>

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

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