Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)

更新時(shí)間：2021年07月19日 15:08:33 作者：前端開發(fā)二月半

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)的具體代碼，供大家參考，具體內(nèi)容如下

不說廢話，先上效果圖~

具體的實(shí)現(xiàn)方法，參照以下步驟~

1.創(chuàng)建login.vue，繪制login畫面，添加跳轉(zhuǎn)事件。

<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('請聯(lián)系管理員找回密碼，管理員電話：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.創(chuàng)建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>設(shè)置</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('確認(rèn)退出嗎?', '提示', {
     //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,//只有一個(gè)節(jié)點(diǎn)
        iconCls: 'el-icon-menu', //圖標(biāo)樣式class
        children: [
            { path: '/homepage', component: Homepage, name: '首頁' },
        ]
    },
    {
        path: '/',
        component: Home,
        name: '菜單',
        // leaf: true,//只有一個(gè)節(jié)點(diǎn)
        iconCls: 'el-icon-message', //圖標(biāo)樣式class
        children: [
            { path: '/table', component: Table, name: '子菜單01' }
        ]
    }
];

export default routes;

5.main.js實(shí)現(xiàn)

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

這樣一個(gè)登陸畫面就實(shí)現(xiàn)了，具體的源碼可以參照：Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: