Vue實現(xiàn)登陸跳轉

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

不說廢話，先上效果圖~

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

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

template

div

el-form:model="ruleForm2":rules="rules2"

status-icon

ref="ruleForm2"

label-position="left"

label-width="0px"

h3登錄平臺/h3

el-form-itemprop="username"

el-inputtype="text"

v-model="ruleForm2.username"

auto-complete="off"

placeholder="用戶名"/el-input

/el-form-item

el-form-itemprop="password"

el-inputtype="password"

v-model="ruleForm2.password"

auto-complete="off"

placeholder="密碼"/el-input

/el-form-item

el-form-item

el-buttontype="primary"@click="handleSubmit":loading="logining"登錄/el-button

/el-form-item

el-form-item

el-checkbox

v-model="checked"

記住密碼/el-checkbox

el-buttontype="text"@click="forgetpassword"忘記密碼/el-button

/el-form-item

/el-form

/div

/template

script

import{requestLogin}from'../api/api';

exportdefault{

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;

varloginParams={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'});

}elseif(user.type==="advert"){

sessionStorage.setItem('user',JSON.stringify(user));

this.$router.push({path:'/table'});

}else{

console.log('errorsubmit!!');

returnfalse;

forgetpassword(){

this.$alert('請聯(lián)系管理員找回密碼，管理員電話：131xxxxxxxx','提示',{

confirmButtonText:'確定',

type:'warning'

/script

stylescoped

label.el-checkbox.rememberme{

margin:0px0px15px;

text-align:left;

label.el-button.forget{

margin:0;

padding:0;

border:1pxsolidtransparent;

outline:none;

/style

2.創(chuàng)建Home.vue菜單欄頁面

template

el-row

el-col:span="24"

el-col:span="18"

{{sysName}}

/el-col

el-col:span="4"

el-dropdowntrigger="hover"

spanimg:src="this.sysUserAvatar"/{{sysUserName}}/span

el-dropdown-menuslot="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"

aside

el-menu:default-active="$route.path"@select="handleselect"

unique-openedrouter

templatev-for="(item,index)in$router.options.routes"v-if="!item.hidden"

el-submenu:index="index+''"v-if="!item.leaf"

templateslot="title"i:/i{{}}/template

el-menu-itemv-for="childinitem.children":index="child.path":key="child.path"v-if="!child.hidden"{{}}/el-menu-item

/el-submenu

el-menu-itemv-if="item.leafitem.children.length0":index="item.children[0].path"i:/i{{item.children[0].name}}/el-menu-item

/template

/el-menu

/aside

section

div

el-col:span="24"

strong{{$}}/strong

/el-col

el-col:span="24"

transitionname="fade"mode="out-in"

router-view/router-view

/transition

/el-col

/div

/section

/el-col

/el-row

/template

script

exportdefault{

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(){

varuser=sessionStorage.getItem('user');

if(user){

user=JSON.parse(user);

this.sysUserName=||'';

this.sysUserAvatar=user.avatar||'';

/script

stylescopedlang="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:10px0px10px10px;

float:right;

.logo{

height:60px;

font-size:22px;

padding-left:20px;

img{

width:40px;

float:left;

margin:10px10px10px0px;

.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:00230px;

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

phomepage/p

/template

4.路由配置

importLoginfrom'./views/Login.vue'

importHomefrom'./views/Home.vue'

importHomepagefrom'./views/list/homepage.vue'

importTablefrom'./views/list/Table.vue'

letroutes=[

path:'/login',

component:Login,

name:'',

hidden:true

path:'/',

component:Home,

name:'',

leaf:true,//只有一個節(jié)點

iconCls:'el-icon-menu',//圖標樣式class

children:[

{path:'/homepage',component:Homepage,name:'首頁'},

path:'/',

component:Home,

name:'菜單',

//leaf:true,//只有一個節(jié)點

iconCls:'el-icon-message',//圖標樣式class

children:[

{path:'/table',component:Table,name:'子菜單01'}

exportdefaultroutes;

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

//TheVuebuildversiontoloadwiththe`import`command

//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.

importVuefrom'vue'

importAppfrom'./App'

importVueRouterfrom'vue-router'

importroutesfrom'./routes'

importVuexfro