Vue implements login jump

This article example shares the specific code of Vue to implement login jump for your reference. The specific content is as follows

Let’s not talk nonsense, let’s take a look at the renderings first~

For specific implementation methods, refer to the following steps~

1. Create login.vue, draw the login screen, and add a jump event.

<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">Login platform</h3>
            <el-form-item prop="username">
                <el-input type="text" 
                    v-model="ruleForm2.username" 
                    auto-complete="off" 
                    placeholder="username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" 
                    v-model="ruleForm2.password" 
                    auto-complete="off" 
                    placeholder="password"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">Login</el-button>
            </el-form-item>
            <el-form-item>
                <el-checkbox 
                    v-model="checked"
                    class="rememberme">Remember password</el-checkbox>
                <el-button type="text" @click="forgetpassword">Forgot password</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: 'Please enter your account number', trigger: 'blur' },
          ],
          checkPass: [
            { required: true, message: 'Please enter your password', 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('Please contact the administrator to retrieve your password, administrator phone number: 131xxxxxxxx', 'Prompt', {
          confirmButtonText: 'Confirm',
          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>

2. Create the Home.vue menu bar page

<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>My message</el-dropdown-item>
      <el-dropdown-item>Settings</el-dropdown-item>
      <el-dropdown-item @click.native="logout">Log out</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">
      {{$route.name}}
     </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 management platform',
    sysUserName: '',
    sysUserAvatar: '',
    form: {
     name: '',
     region: '',
     date1: '',
     date2: '',
     delivery: false,
     type: [],
     resource: '',
     desc: ''
    }
   }
        },
    methods: {
   //Logout: function () {
    var _this = this;
    this.$confirm('Confirm to exit?', 'Prompt', {
     //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>

3. Create subpages

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

4. Routing Configuration

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, //Only one node iconCls: 'el-icon-menu', //Icon style class
        children: [
            { path: '/homepage', component: Homepage, name: 'Homepage' },
        ]
    },
    {
        path: '/',
        component: Home,
        name: 'Menu',
        // leaf: true, // only one node iconCls: 'el-icon-message', // icon style class
        children: [
            { path: '/table', component: Table, name: 'Submenu 01' }
        ]
    }
];

export default routes;

5.main.js implementation

// 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 = false

const 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')

Such a login screen is realized. For the specific source code, please refer to: Vue realizes login jump

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: