Ant Design of Vue 之侧栏导航与面包屑联动 |
您所在的位置：网站首页 › breadcrumbs官网 › Ant Design of Vue 之侧栏导航与面包屑联动 |
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 中实现。 主要代码如下： {{item.name}} {{subitem.name}} 复制代码导航菜单项通过自定义配置文件 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 数组，代表二级菜单项的所有配置项。二级菜单配置项中每个对象为二级菜单项点击时需要加载的页面及路由。 面包屑组件面包屑组件代码如下： {{item}} 复制代码面包屑组件显示信息通过读取路由 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: ['广东', '珠海'] } },... ] } ] }) 复制代码 效果 & 链接最终实现效果如下：
|
【本文地址】
今日新闻 |
推荐新闻 |