使用AI一步一步实现若依前端(11)

功能11：实现面包屑功能

功能10：添加首页菜单项
功能9：退出登录功能
功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目

前言

在导航栏上显示当前页面路径的就是面包屑。它可以侧边栏菜单联动。

一.操作步骤

1.先问问AI，提供一些思路

AI思考了107秒 AI会给出一些可能要修改的问题点，根据AI给出的方向适当修改代码。

2.修改Sidebar.vue

给el-menu设置default-active和default-openeds属性。

3.修改Navbar.vue

style部分没有改变，不贴代码了。

{{ item.meta.title }}
{{ item.meta.title }}

![用户头像]()

个人设置

退出登录

4.修改MenuItem.vue

优先处理跟目录，返回/index，跟menu里的一致，组件才能正常联动。

const resolvePath = (routePath) => {
if (routePath === '/') {
return '/index'
}
if (props.basePath.length === 0) {
return routePath
}
return getNormalPath(props.basePath + '/' + routePath)
}

后端返回的路由数据里的图标，有些是ElemetPlus里没有的，导致不显示，暂时先全部显示成主页图标House，方便观察菜单的层级关系。

二.功能验证

运行项目，浏览器访问http://localhost:5173/index

三.知识点拓展

四.思考

遗留一个Bug，在点击 系统管理--日志管理--操作日志 菜单时，在面包屑上只显示了 首页/系统管理/操作日志 。