目录

0 前言

1 准备工作

1.1 安装ant-design-vue

1.2 安装图标组件包

2 选择组件

3 路由文件

4 Vue导航页面

5 最终效果

---

0 前言

        最近在自己搞一个前后端小项目，前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑，但是网上的资料较少，所以我就自己整合实现了一下，在此记录分享。

1 准备工作

        基于一个新建的Vue3项目上实现。

1.1 安装ant-design-vue

        官方文档：Components Overview - Ant Design Vue (antdv.com)

        安装：

npm i --save ant-design-vue

        全局注册：

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(Antd).mount('#app');

1.2 安装图标组件包

npm install --save @ant-design/icons-vue

        main.js中引用并全局注册

import * as Icons from '@ant-design/icons-vue'
//全局注册图标
const icons = Icons
for (const i in icons) {
  app.component(i, icons[i])
}

2 选择组件

        如下图所示，复制组件代码：

3 路由文件

        router/index.js文件

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    //导航页
    path: '/layout',
    name: 'layout',
    meta: {
      title: '首页',
      keepalive: true
    },
    component: () => import('@/views/layout/'),
    children: [
      {
        //欢迎页
        path: '/layout',
        name: 'welcome',
        meta: {
          title: '首页',
          keepalive: true
        },
        component: () => import('@/views/welcome/')
      },
      {
        //实时数据
        path: '/runtimeData',
        name: 'runtimeData',
        meta: {
          title: '实时数据',
          keepalive: true
        },
        component: () => import('@/views/runtimeData/')
      },
      {
        //数据分析
        path: '/dataAnalysis',
        name: 'dataAnalysis',
        meta: {
          title: '数据分析',
          keepalive: true
        },
        component: () => import('@/views/dataAnalysis/')
      },
      {
        //数据处理(增删改查)
        path: '/dataManage',
        name: 'dataManage',
        meta: {
          title: '数据总览',
          keepalive: true
        },
        component: () => import('@/views/dataManage/')
      },
      {
        //查看用户信息
        path: '/showUserInfo',
        name: 'showUserInfo',
        meta: {
          title: '查看用户信息',
          keepalive: true
        },
        component: () => import('@/views/my/showUserInfo.vue')
      },
      {
        //修改用户信息
        path: '/editUserInfo',
        name: 'editUserInfo',
        meta: {
          title: '修改用户信息',
          keepalive: true
        },
        component: () => import('@/views/my/editUserInfo.vue')
      },
    ]
  },
  {
    //登录页面
    path: '/login',
    name: 'login',
    meta: {
      title: '登录',
      keepalive: true
    },
    component: () => import('@/views/login/index.vue')
  },
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

4 Vue导航页面

        views/layout/index.vue，主要关注标签a-layout中的内容及相关变量

        上面的代码中将路由文件中的路由表重新写了一个变量，主要是为了方便，并不是所有页面路由都要制作导航栏，这样就不用在router/index.js中添加路由时考虑太多。

5 最终效果

         效果如上图所示，我这里也写了一个面包屑，不过还有些问题，就交给大伙儿实现吧！