当前位置: 首页 > news >正文

首页 layout 架子(element-plus菜单组件)

直接 cv 笔记中静态页面

菜单组件:
认识了解 el-menu整个菜单组件,el-menu-item菜单项,el-sub-menu多级菜单的标题,el-menu-item各个展开内容。也就是一级直接 el-menu-item,如果下面还有分类,就是 el-sub-menu

首页架子主要是左右两个部分,左边 aside ,右边 container,右侧又分为上下。

登录访问拦截:

也就是首页内容必须是登陆过的才能访问,未登录自然不能访问。

在router的 index.js进行访问拦截

可以直接在官网 vue-router 中找到导航守卫

用户基本信息获取和渲染

封装接口

因为是要存储到 pinia 中,所以要在 stores文件夹中的 user.js模块中 新建一个对象用来管理个人信息

调用 pinia中 useUserStore,使用其中的 getUser 方法得到

渲染昵称和头像,有昵称用昵称,没有昵称直接用账户名;有头像图片用头像图片,没有直接用默认的

该下拉菜单中前三个是一个导航跳转,点击即可跳到左边的个人中心下面内容

el组件中是 Dropdown 下拉菜单

在 el-dropdown 中,通常通过 @command 事件来处理 菜单项的点击事件,每个 el-dropdown-item会设置一个command属性,该属性值会在点击菜单项目时作为事件的参数传递给父组件的的事件处理函数

在 pinia 中设置清除个人信息函数,然后调用 

加个消息弹出框,防止误点直接退出了

要在 eslintrc.cjs中配置 ElMessageBox 才不会报错

相关文章:

  • 解锁机器学习核心算法 | 逻辑回归:不是回归的“回归”
  • 通过API 调用本地部署 deepseek-r1 模型
  • 关系中出现这10个信号,离分手就不远了(爱情友情都适用)
  • idea连接gitee后.反向创建仓库和分支
  • 前端基础入门:HTML、CSS 和 JavaScript
  • 【股票数据API接口28】如何获取强势股池数据之Python、Java等多种主流语言实例代码演示通过股票数据接口获取数据
  • Scrapy:DownloaderAwarePriorityQueue队列设计详解
  • 企业软件合规性管理:构建高效、安全的软件资产生态
  • docker知识
  • 网工项目实践2.8 IPv6设计及网络优化需求分析及方案制定
  • 2025.2.20总结
  • 分布式架构与XXL-JOB
  • Redis常用命令合集【二】
  • 【Axure高保真原型】嵌套表格
  • 【LeetCode Hot100 链表(上)】相交链表、反转链表、回文链表、环形链表、合并两个有序链表、两数相加
  • PrimeFaces实战:IdleMonitor与Ajax的完美结合
  • 论文笔记(七十二)Reward Centering(二)
  • 《天津大学DeepSeek原理与效应》.pdf(文末有完整版下载地址)
  • Python 爬虫selenium
  • Es的text和keyword类型以及如何修改类型
  • 科普|揭秘女性压力性尿失禁的真相
  • 北洋“修约外交”的台前幕后——民国条约研究会档案探研
  • 白玉兰奖征片综述丨综艺市场破局焕新,多元赛道重塑价值坐标
  • 第三届“老山国际春茶节”活动在云南麻栗坡举办
  • 习近平会见塞尔维亚总统武契奇
  • 马上评丨规范隐藏式车门把手,重申安全高于酷炫