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.完整代码

主要步骤:
在这里插入图片描述

0.效果演示

在这里插入图片描述

1.搭建Vue3项目

1.1 vite 脚手架创建 Vue3 项目

npm create vite@latest vue3-zhifou -- --template vue

代码编辑器进入刚创建的项目文件夹里面

#安装依赖
 npm

猜你喜欢

转载自blog.csdn.net/bjzhang75/article/details/142642749