目录

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 最终效果

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！