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