Vue3实现动态菜单功能

文章目录

• 0.效果演示
• 1.搭建Vue3项目
• • 1.1 vite 脚手架创建 Vue3 项目
  • 1.2 设置文件别名
  • 1.3 安装配置 element-plus
  • 1.4 安装配置路由
• 2.登录页面
• 3.后台管理页面
• • 3.1 搭建后台框架
  • 3.2 左侧菜单栏
  • 3.3 header 用户信息
  • 3.4 主要内容
  • 3.5 footer
• 4.配置静态路由
• 5.记录激活菜单
• • 5.1 el-menu 绑定 default-active 属性
  • 5.2 菜单添加点击事件
  • 5.3 初始化激活菜单
• 6.动态路由
• • 6.1 登录成功存储数据
  • 6.2 路由导航守卫动态配置路由
  • 6.3 解决刷新页面，页面空白的问题
• 7.完整代码