前端小白,最近尝试着学学前端vue,前端基于vue+elementUI开发,本意想实现页面跳转来着的注册通过这样的外部连接肯定是没啥问题的,但是想通过vue-router,调试老报错,麻爪有点弄不懂,有大大指点下么
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/element.css">
<script src="/js/vue.min.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/vue-router.js"></script>
<!--背景样式-->
<style>
#imgGround {
height: 100%;
width: 100%;
background: url('image/login_ground.jpg') no-repeat;
background-size: cover;
overflow: hidden;
left:0px;
top:0px;
position:fixed;
z-index:-100;
}
</style>
<style>
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.login-box {
margin-top:20%;
margin-left:40%;
}
</style>
</head>
<body>
<!--背景-->
<div id="imgGround"></div>
<div class="login-box" id="app" >
<el-row>
<el-col :span="8">
<el-input autofocus id="name" v-model="name" placeholder="请输入帐号" @keyup.enter.native="tab(event,'username')">
<template slot="prepend">帐号</template>
</el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-input id="password" v-model="password" type="password" placeholder="请输入密码" @keyup.enter.native="check">
<template slot="prepend">密码</template>
</el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-button @click="check" style="width:100%" type="primary">登录</el-button>
</el-col>
</el-row>
<!-- <el-row><a href="html/login/register.html">注册</a></el-row>-->
<el-row>
<el-button-group :span="8">
<el-button @click="forgotPassword" type="primary" icon="el-icon-s-help">忘记密码</el-button>
<el-button type="primary" icon="el-icon-s-help">忘记账户</el-button>
<el-button type="primary" icon="el-icon-user-solid">注册</el-button>
</el-button-group>
</el-row>
</div>
</body>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
name : '',
password : ''
},
methods : {
check : function(event){
//获取值
var name = this.name;
var password = this.password;
if(name == '' || password == ''){
this.$message({
message : '账号或密码为空!',
type : 'error'
})
return;
}
axios
.post('/login',{"name":name,"password":password})
.then(response => {
var info = response.data.split('_');
var code = info[0];
var message = info[1];
if(code==200 || code==201){
this.$message({
message : message,
type : 'success'
})
//普通跳转
if (code==201){
//超管跳转
}
}else{
//其他
this.$message({
message : message,
type : 'error'
})
}
})
.catch(function (error) { // 请求失败处理
console.log(error);
});
},
forgotPassword: function (event){
return this.$router.push('login');
}
}
})
//换行焦点时间
function tab(event,btn){
if(btn=="username" && event.keyCode==13){
this.password.focus();
}
}
</script>
</html>
this指向问题吧, 在函数前将this记录一下即可.