Ant Design of Vue 之側欄導航與麪包屑聯動

側欄導航與麪包屑聯動在 PC Web 上常見的一種網頁效果。本文主要介紹如何基於 Ant Design of Vue 實現側欄導航與麪包屑聯動。

安裝和使用 Ant Design of Vue

參考：Ant Design of Vue - 快速上手

安裝

npm i --save ant-design-vue
複製代碼

使用

在 vue 工程項目 src 目錄下的 main.js 文件進行完整引入便可。

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)
複製代碼

側欄導航組件

側欄導航組件經過三個標籤 a-menu、 a-sub-menu 和 a-menu-item，包裹在佈局容器 a-layout-sider 中實現。

主要代碼以下：

<template>
  <a-layout-sider width="200">
    <div class="logo"></div>
    <a-menu
      mode="inline"
      :defaultSelectedKeys="['ShenzhenPage']"
      :defaultOpenKeys="['Guangdong', 'Guangxi']"
      :style="{ height: '91vh', borderRight: 0 }"
      theme="dark"
    >
      <a-sub-menu  v-for="item in SidebarMenu" :key="item.id">
        <span slot="title">
          <a-icon type="bars" />{{item.name}}
        </span>
        <a-menu-item v-for="subitem in item.sub" :key="subitem.componentName">
          <router-link :to="subitem.path+''">{{subitem.name}}</router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>
複製代碼

導航菜單項經過自定義配置文件 SidebarMenuConfig.js 引入。

SidebarMenuConfig.js 以下：

module.exports = [{
  name: '廣東省',
  id: 'Guangdong',
  sub: [
    {
      name: '深圳',
      path: '/shenzhen',
      componentName: 'ShenzhenPage'
    },
    {
      name: '廣州',
      path: '/guangzhou',
      componentName: 'GuangzhouPage'
    },
    {
      name: '珠海',
      path: '/zhuhai',
      componentName: 'ZhuhaiPage'
    }
  ]
}, ....]
複製代碼

這裏的處理是將菜單項配置定義爲一個數組，一級菜單就是數組中的一個對象元素。每一個對象中又存在一個 sub 數組，表明二級菜單項的全部配置項。二級菜單配置項中每一個對象爲二級菜單項點擊時須要加載的頁面及路由。

麪包屑組件

麪包屑組件代碼以下：

<template>
  <a-breadcrumb style="padding: 16px 0px 0px 20px; font-size: 16px;">
    <a-breadcrumb-item v-for="(item, index) in $route.meta.breadcrumb" :key="index">{{item}}</a-breadcrumb-item>
  </a-breadcrumb>
</template>
複製代碼

麪包屑組件顯示信息經過讀取路由 meta 中的 breadcrumb 數組實現。

相關路由信息配置在 router/index.js 中，以下：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      redirect: '/shenzhen',
      meta: {
        keepalive: true
      },
      children: [{
        path: '/shenzhen',
        name: 'ShenzhenPage',
        component: ShenzhenPage,
        meta: {
          keepalive: true,
          breadcrumb: ['廣東', '深圳']
        }
      }
      ,{
        path: '/guangzhou',
        name: 'GuangzhouPage',
        component: GuangzhouPage,
        meta: {
          keepalive: true,
          breadcrumb: ['廣東', '廣州']
        }
      },{
        path: '/zhuhai',
        name: 'ZhuhaiPage',
        component: ZhuhaiPage,
        meta: {
          keepalive: true,
          breadcrumb: ['廣東', '珠海']
        }
      },...
    ]
    }
  ]
})
複製代碼

效果 & 連接

最終實現效果以下：

文末附上 Demo 連接， 請戳此處。