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 连接， 请戳此处。