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