前面实现了登录功能，现在来实现登录后跳转的首页级首页的制作。 1、新建一个Home.vue文件 components——New——Vue Component（WebStorm这个软件2018.1这个版本才有的选项，早期版本没有，如果没有可以创建File自己手动加入Vue模板） 创建好后的模板如下：
<template> </template> <script> export default { name: "Home" } </script> <style scoped> </style>2、注册到router里面 创建出来的任何一个文件都需要到router中去注册 3、登录成功跳转到首页 注册完成之后。当登录成功的时候，要跳转到Home页面，跳转是根据main.js中的router路由进行跳转 那么在这里怎么获取路由对象呢？通过this.$router,它里面有两个方法，一个是replace，一个是push。这个页面就相当于一个栈，push就是往栈里面加一个页面（浏览器中有一个后退按钮，如果是push进去的，点击后退按钮就会回到登录页面），replace就是替代它（如果是replace进去的，那点击浏览器的后退按钮将不会再回到登录页面）。这里没有要再回到Login页面的需求，所以使用replace。 登录成功实现跳转： 4、首页设计 既然已经可以成功的实现登录后跳转到首页，那么下面来首页内容进行简单的处理。在ElementUI中选择想要的布局容器。 然后对选择的布局容器进行相应的改造: 在index.html中去掉首页边距 把登录的用户信息保存下来方便使用，可以保存哎cookie中，但是有些浏览器不支持cookie,而且它支持的数据量非常有限。在html5里面，浏览器的存储方式更多样化。引入了两个重要的东西。 一个是Session Storage（是和session绑定的，浏览器关闭再打开就没了，所以这里把用户信息保存在这里面）。 一个是Local Storage(是一个本地存储，一但把数据存储在这里面，除非用代码清除，或者清除浏览器缓存，非则它一直都在)。 还有数据库，浏览器本地也可以有数据库（IndexedDB、Web SQL） 通过window.sessionStorage.setItem(“user”,msg.obj), msg.obj就是服务端返回的json中的对象信息，要把它转成字符串。 重新登陆后，在浏览器的Session Storage里面就能看到登录的用户信息了
这样首页就可以通过Session Storage获取到登录的用户信息，显示在页面 显示在首页效果如下： 4、注销功能 首先给注销下拉框设置点击事件command 然后在下面的方法里面定义menuItemCommand这个方法，这个方法有一个默认的参数，就叫cmd，在下面可以根据cmd的参数去判断到底选择的是个人中心、设置还是注销，详细如下，解释看注释：
methods:{ // 这个方法有一个默认的参数就叫cmd menuItemCommand(cmd){ // alert(cmd) if (cmd=='logout') { //是否确认注销，使用的ElementUI中的MessageBox弹框模板 this.$confirm('此操作将注销登录, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //如果确认注销就执行/logout请求 this.getRequest("/logout"); //移除user用户信息 window.sessionStorage.removeItem("user"); //去登录页面 this.$router.replace("/"); }).catch(() => { this.$message({ type: 'info', message: '已取消注销' }); }); } } }首页具体代码如下：
<template> <div> <el-container> <!--display: flex;align-items: center设置辅轴居中--> <!-- justify-content: space-between弹性项目平均分布在该行上。 假设剩余空间为负或者仅仅有一个弹性项。则该值等同于flex-start。 否则，第1个弹性项的外边距和行的main-start边线对齐。而最后1个弹性项的外边距和行的main-end边线对齐。 然后剩余的弹性项分布在该行上。相邻项目的间隔相等。--> <el-header style="background-color: lightskyblue;display: flex;align-items: center;justify-content: space-between"> <div style="font-family: 楷体;font-size: x-large;font-style: inherit">粤通国际物流管理系统</div> <el-dropdown style="cursor: pointer;"@command="menuItemCommand"> <span class="el-dropdown-link"> {{user.username}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="usercenter">个人中心</el-dropdown-item> <el-dropdown-item command="setting">设置</el-dropdown-item> <el-dropdown-item divided command="logout">注销</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-container> <el-aside width="200px"> <!-- 左侧菜单栏，使用的是ElementUI中的NavMenu导航菜单栏的模板 unique-opened默认只打开一个 router是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 --> <el-menu unique-opened router class="el-menu-vertical-demo"> <!--循环遍历出路由表index.js中的routes节点的数据，加冒号表示把它当成变量来处理 item就相当于routes 中一项一项的元素, 只显示item.hidden为false的值， 凡是有for循环的地方都必须加一个 :key item.mata.roles.indexOf(user.role.rolename)!=-1表示路由表index.js中的item.mata.roles（需要的角色） indexOf数组的下标，查出来的当前用户角色等于-1 说明我需要的角色你没有，所以不能访问 --> <el-submenu :index="index+''" v-for="(item,index) in routes" v-if="!item.hidden&&item.meta.roles.indexOf(user.role.rolename)!=-1" :key="index"> <template slot="title"> <i class="el-icon-location"></i> <span>{{item.name}}</span> </template> <!-- 遍历出路由表index.js文件中children节点的数据--> <el-menu-item :index="child.path" v-for="(child,indexj) in item.children" >{{child.name}}</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <!-- 把路由放在此处，这时候就有两个<router-view/>,所以在路由表index.js中的/home里面定义了children节点 它会先去寻找父节点中有没有<router-view/>，如果没有才会继续往上找到App.vue里面的<router-view/> 在vue中要展示或者隐藏一个东西，用v-if或者v-show，他们两个的区别是v-if是直接移除元素，v-show是元素还在，只是不掩饰。 如果一个控件要频繁的显示隐藏那就用v-show，否则就用v-if --> <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <!-- 获取路由对象中当前路由对象的名字--> <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item> </el-breadcrumb> <div style="font-family: 仿宋;font-size: xx-large;text-align: center;width: 100%;margin-top: 100px" v-show="this.$router.currentRoute.path=='/home'"> 欢迎来到粤通国际物流管理系统！ </div> <router-view/> </el-main> </el-container> </el-container> </div> </template> <script> export default { name: "Home", data(){ return{ user:JSON.parse(window.sessionStorage.getItem("user")), //获取到的options.routes就是路由表中的index.js文件中的routes节点的json数组的数据 routes:this.$router.options.routes } }, methods:{ //选择左侧菜单栏的方法 // menuItemSelect(index,indexpath){ // //点击后触发该方法，跳转到index指定值的页面 // this.$router.push(index); // }, // 这个方法有一个默认的参数就叫cmd menuItemCommand(cmd){ // alert(cmd) if (cmd=='logout') { //是否确认注销，使用的ElementUI中的MessageBox弹框模板 this.$confirm('此操作将注销登录, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //如果确认注销就执行/logout请求 this.getRequest("/logout"); //移除user用户信息 window.sessionStorage.removeItem("user"); //去登录页面 this.$router.replace("/"); }).catch(() => { this.$message({ type: 'info', message: '已取消注销' }); }); } } } } </script> <style scoped> </style>