经过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的值；通过控制log名
- 通过点击某个元素控制collapsed的值。
（点击事件@click.prevent=“collapse”）？？此处的点击事件为什么没有native？？
事件函数： - 在本个实例中，创建导航菜单和导航菜单折叠两个样式，再通过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(() => {
});
},
侧边栏部分：
侧边栏渲染
展开时
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
通过遍历路由来，实现侧边栏效果（但我觉得这个在其他组件多的时候，这个方法还是不好的），不需要用来生成侧边栏导航的路由组件则通过添加一个属性（hidden：true），再通过for循环遍历生成时，添加一个条件语句（v-if="!item.hidden"），判断，当路由属性不是隐藏时，将对应组件渲染到菜单栏上。
有一些菜单没有镶嵌子菜单，有一些菜单包含子菜单。
所以，就需要通过条件判断生成哪个菜单样式( v-if="!item.leaf")，判断是否是最末的节点。
通过:index属性确定对应菜单的跳转路由（:index=“child.path”）；
收起时
<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
<template v-if="!item.leaf">
<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
<i :class="item.iconCls"></i>
</div>
<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
</ul>
</template>
<template v-else>
<li class="el-submenu">
<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)">
<i :class="item.iconCls"></i>
</div>
</li>
</template>
</li>
这块代码没有什么新的知识点部分，主要是当移动到每个菜单时，北京尚学堂Java基础如果有子菜单的话，会弹出子菜单来。
初始加载页面时
:default-active="$route.path" 这个代码的作用就是展开对应路由的页面所对应的侧边栏选项，选中当前选择路由。不仅是初始加载页面的效果，也是当收起和展开菜单会出现的效果。
原作者：mirror_Mx
原地址： CSDN
原链接：https://blog.csdn.net/mirror_Mx/article/details/?ops_request_misc=%25257B%request%25255Fid%%25253A%%%25252C%scm%%25253A%713..pc%25255Fblog.%%25257D&request_id=02&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-3-.pc_v1_rank_blog_v1&utm_term=vue%E5%AE%9E%E6%88%98%E4%B9%8Bvue%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.bianchenghao6.com/h6javajc/24616.html