vue如何实现登陆跳转的功能？现在很多网站和APP都需要注册登录使用，因此我们常常会需要实现登陆跳转的功能，下面就给大家分享下vue框架实现登陆跳转的功能的代码，效果如下，感兴趣的朋友可以参考。

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

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

<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>

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

<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>

    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', //图标样式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;

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

    关于vue如何实现登陆跳转就介绍到这，上述实例具有一定的参考价值，感兴趣的朋友可以参考学习，希望能对大家有帮助，想要了解更多大家可以关注群英网络其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Loader和Plugin的使用区别在哪，哪些事项要注意

  这篇文章主要介绍了Webpack的Loader和Plugin的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• JS函数的定义方式有几种，用法是怎样的

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要整理了函数的定义与基本使用的相关问题，包括了用函数语句定义、函数的调用、未定义的实参等等内容，下面一起来看一下，希望对大家有帮助。

• vue事件处理的基本实现及知识点有哪些

  Vue 事件处理是每个 Vue 项目的必要方面。它用于捕获用户输入，共享数据以及许多其他创造性方式。在本文中，我将介绍基础知识，并提供一些用于处理事件的代码示例。基本事件处理

• Node.js中HTTP模块的用法的相关知识有什么

  这篇文章主要介绍了Node.js之http模块的用法，对Node.js感兴趣的同学，可以参考下

• 如何理解Vue生命周期和钩子函数的作用和使用

  这篇文章主要给大家介绍了关于Vue生命周期介绍和钩子函数的相关资料，对大家学习或者使用vue2具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧