Vue实现登陆跳转

<template>    <div class="login-container">        <el-form :model="ruleForm2" :rules="rules2"         status-icon         ref="ruleForm2"          label-position="left"          label-width="0px"          class="demo-ruleForm login-page">            <h3 class="title">登录平台</h3>            <el-form-item prop="username">                <el-input type="text"                     v-model="ruleForm2.username"                     auto-complete="off"                     placeholder="用户名"></el-input>            </el-form-item>            <el-form-item prop="password">                <el-input type="password"                     v-model="ruleForm2.password"                     auto-complete="off"                     placeholder="密码"></el-input>            </el-form-item>            <el-form-item style="width:100%;">                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>            </el-form-item>            <el-form-item >                <el-checkbox                     v-model="checked"                    class="rememberme">记住密码</el-checkbox>                <el-button type="text" @click="forgetpassword">忘记密码</el-button>            </el-form-item>                    </el-form>    </div></template><script>  import { requestLogin } from '../api/api';  export default {    data() {      return {        logining: false,        ruleForm2: {        },        rules2: {          account: [            { required: true, message: '请输入账号', trigger: 'blur' },          ],          checkPass: [            { required: true, message: '请输入密码', trigger: 'blur' },          ]        },        checked: true      };    },    methods: {      handleReset2() {        this.$refs.ruleForm2.resetFields();      },      handleSubmit(ev) {        this.$refs.ruleForm2.validate((valid) => {          if (valid) {            this.logining = true;            var loginParams = { username: this.ruleForm2.username, password: this.ruleForm2.password, identifycode: this.ruleForm2.identifycode };            requestLogin(loginParams).then(data => {              this.logining = false;              let { msg, code, user } = data;              if (code !== 200) {                this.$message({                  message: msg,                  type: 'error'                });              } else {                if (user.type === "admin"){                    sessionStorage.setItem('user', JSON.stringify(user));                    this.$router.push({ path: '/homepage' });                } else if (user.type === "advert") {                    sessionStorage.setItem('user', JSON.stringify(user));                    this.$router.push({ path: '/table' });                }              }            });          } else {            console.log('error submit!!');            return false;          }        });      },      forgetpassword(){          this.$alert('请联系管理员找回密码，管理员电话：131xxxxxxxx', '提示', {          confirmButtonText: '确定',          type: 'warning'        })      }    }  }</script><style scoped>    label.el-checkbox.rememberme {        margin: 0px 0px 15px;        text-align: left;    }    label.el-button.forget {        margin: 0;        padding: 0;        border: 1px solid transparent;        outline: none;    }</style>

<template>    <el-row class="container">        <el-col :span="24" class="header">   <el-col :span="18" class="logo" >                {{sysName}}   </el-col>   <el-col :span="4" class="userinfo">    <el-dropdown trigger="hover">     <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>     <el-dropdown-menu slot="dropdown">      <el-dropdown-item>我的消息</el-dropdown-item>      <el-dropdown-item>设置</el-dropdown-item>      <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>     </el-dropdown-menu>    </el-dropdown>   </el-col>  </el-col>        <el-col :span="24" class="main">            <aside>                <el-menu :default-active="$route.path" class="el-menu el-menu-vertical-demo" @select="handleselect"                        unique-opened router >                        <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>                </el-menu>            </aside>   <section class="content-container">    <div class="grid-content bg-purple-light">     <el-col :span="24" class="breadcrumb-container">      <strong class="title">{{$route.name}}</strong>     </el-col>     <el-col :span="24" class="content-wrapper">      <transition name="fade" mode="out-in">       <router-view></router-view>      </transition>     </el-col>    </div>   </section>  </el-col>    </el-row></template><script>export default {    data() {   return {    sysName:'xxx管理平台',    sysUserName: '',    sysUserAvatar: '',    form: {     name: '',     region: '',     date1: '',     date2: '',     delivery: false,     type: [],     resource: '',     desc: ''    }   }        },    methods: {   //退出登录   logout: function () {    var _this = this;    this.$confirm('确认退出吗?', '提示', {     //type: 'warning'    }).then(() => {     sessionStorage.removeItem('user');     _this.$router.push('/login');    }).catch(() => {    });   }  },    mounted() {   var user = sessionStorage.getItem('user');   if (user) {    user = JSON.parse(user);    this.sysUserName = user.name || '';    this.sysUserAvatar = user.avatar || '';   }  }}</script><style scoped lang="scss">@import '../style/vars.scss';    .container {  position: absolute;  top: 0px;  bottom: 0px;  width: 100%;    }    .header {   height: 60px;            line-height: 60px;   background: $color-primary;   color:#fff;   .userinfo {    text-align: right;    padding-right: 35px;    float: right;    .userinfo-inner {     cursor: pointer;     color:#fff;     img {      width: 40px;      height: 40px;      border-radius: 20px;      margin: 10px 0px 10px 10px;      float: right;     }    }   }   .logo {    height:60px;    font-size: 22px;    padding-left:20px;    img {     width: 40px;     float: left;     margin: 10px 10px 10px 0px;    }    .txt {                    color:#fff;    }   }   .logo-width{    width:230px;   }   .logo-collapse-width{    width:60px   }   .title{                font-size: 22px;    padding-left:20px;    line-height: 60px;    color:#fff;   }        }    .main {   display: flex;   position: absolute;   top: 60px;   bottom: 0px;   overflow: hidden;   aside {    flex:0 0 230px;    width: 230px;    .el-menu{                    height: 100%;                    /* width: 34%; */    }   }   .content-container {    flex:1;    /* overflow-y: scroll; */    padding: 20px;    .breadcrumb-container {     .title {      width: 200px;      float: left;      color: #475669;     }     .breadcrumb-inner {      float: right;     }    }    .content-wrapper {     background-color: #fff;     box-sizing: border-box;    }   }  }</style>

<template>   <p> homepage</p></template>

import Login from './views/Login.vue'import Home from './views/Home.vue'import Homepage from './views/list/homepage.vue' import Table from './views/list/Table.vue'let routes = [    {        path: '/login',        component: Login,        name: '',        hidden: true    },    {        path: '/',        component: Home,        name: '',        leaf: true,//只有一个节点        iconCls: 'el-icon-menu', //图标样式class        children: [            { path: '/homepage', component: Homepage, name: '首页' },        ]    },    {        path: '/',        component: Home,        name: '菜单',        // leaf: true,//只有一个节点        iconCls: 'el-icon-message', //图标样式class        children: [            { path: '/table', component: Table, name: '子菜单01' }        ]    }];export default routes;

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import VueRouter from 'vue-router'import routes from './routes'import Vuex from 'vuex'import store from './vuex/store'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import Mock from './mock'Mock.bootstrap();import './style/login.css'/* Vue.use(VueAxios, axios) */Vue.use(ElementUI)Vue.use(VueRouter)Vue.use(Vuex)Vue.config.productionTip = falseconst router = new VueRouter({  routes})router.beforeEach((to, from, next) => {  //NProgress.start();  if (to.path == '/login') {    sessionStorage.removeItem('user');  }  let user = JSON.parse(sessionStorage.getItem('user'));  if (!user && to.path != '/login') {    next({ path: '/login' })  } else {    next()  }})new Vue({  router,  store,  render: h => h(App)}).$mount('#app')