主页 > 开源代码  > 

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

首页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 才不会报错

标签:

首页layout架子(element-plus菜单组件)由讯客互联开源代码栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“首页layout架子(element-plus菜单组件)