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

经过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 || '';
	}
}

vue 知识体系：https://github.com/sunseekers/Vue
mounted是el实例挂在之后，才开始从存储中读取用户信息的数据，再渲染到页面上。
结构功能中的两个重要的功能点：侧边栏（包括log）的展开与收起、鼠标经过昵称或头像时展开一些操作。

侧边栏的展开与收起

收起后的效果：

实现原理：

• 需要一个参数来存放状态（collapsed），初始值为false；
• 再通过三元运算符，动态控制class的值；通过{{collapsed?'':sysName}}控制log名
• 通过点击某个元素控制collapsed的值。
  （点击事件@click.prevent=“collapse”）？？此处的点击事件为什么没有native？？
  事件函数：collapse:function(){this.collapsed=!this.collapsed;},
• 在本个实例中，创建导航菜单和导航菜单折叠两个样式，再通过collapsed参数，控制显示折叠与展开，但是此处不能使用v-show，这个方法知识隐藏元素，当折叠后，会改变原导航菜单的宽度会在行内样式中自动添加宽度样式，如果替换成v-if就没有这个问题了。

鼠标经过时展开内容

用到了element中的drapdown（下拉菜单） http://element-cn.eleme.io/#/zh-CN/component/dropdown
退出登录的操作方法：

logout: function () {
	var _this = this;
	this.$confirm('确认退出吗?', '提示', {
		//type: 'warning'
	}).then(() => {
		sessionStorage.removeItem('user');
		_this.$router.push('/login');
	}).catch(() => {
	});
},

侧边栏操作：

初始加载页面时

:default-active="$route.path" 这个代码的作用就是展开对应路由的页面所对应的侧边栏选项。