Vue实现登陆跳转

本文实例为大家分享了Vue实现登陆跳转的具体代码，供大家参考，具体内容如下

不说废话，先上效果图~

具体的实现方法，参照以下步骤~

1.创建login.vue，绘制login画面，添加跳转事件。

<template> <div class='login-container'><el-form :model='ruleForm2' :rules='rules2' status-icon ref='ruleForm2' label-position='left' label- 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' @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>

2.创建Home.vue菜单栏页面

<template> <el-row class='container'><el-col :span='24' class='header'> <el-col :span='18' >{{sysName}} </el-col> <el-col :span='4' class='userinfo'> <el-dropdown trigger='hover'> <span class='el-dropdown-link userinfo-inner'><img :src='https://www.haobala.com/bcjs/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' @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>

3.制作子页面

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

4.路由配置

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’, //图标样式classchildren: [ { path: ’/homepage’, component: Homepage, name: ’首页’ },] }, {path: ’/’,component: Home,name: ’菜单’,// leaf: true,//只有一个节点iconCls: ’el-icon-message’, //图标样式classchildren: [ { path: ’/table’, component: Table, name: ’子菜单01’ }] }];export default routes;

5.main.js实现

// 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’)

这样一个登陆画面就实现了，具体的源码可以参照：Vue实现登陆跳转

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。