vue实战之vue后台管理系统（三）之公共样式组件

最新推荐文章于 2024-08-19 00:15:00 发布

mirror_Mx

最新推荐文章于 2024-08-19 00:15:00 发布

阅读量3.3k

点赞数

分类专栏： vue项目 vue 文章标签： vue项目

本文链接：https://blog.csdn.net/mirror_Mx/article/details/86240005

版权

本文详细介绍了在Vue项目中如何构建一个后台管理系统，重点讲解了Home.vue组件的layui布局，包括图片和昵称的加载、侧边栏的展开与收起、鼠标经过时的响应。同时，讨论了侧边栏渲染的实现，特别是如何动态生成菜单并处理展开与收起的状态。此外，还提到了退出登录的操作以及如何在页面加载时自动选中对应侧边栏选项。

摘要由CSDN通过智能技术生成

经过login页面跳转，跳转成功后，跳转到table页面。
在这里插入图片描述

Home.vue组件

这个组件的用户登录成功后所有页面(除404页面外），所有页面的公共部分组件

layui布局

官网布局： http://element-cn.eleme.io/#/zh-CN/component/layout
此页面的代码布局结构：
在这里插入图片描述

图片和昵称的加载

<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar"/> 
	{
  {sysUserName}}
</span>

mounted() {
   
	var user = sessionStorage.getItem('user');
	if (user) {
   
		user = JSON.parse(user);
		this.sysUserName = user.name || '';
		this.sysUserAvatar = user.avatar || '';
	}
}