问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue-router中Cannot read property 'push' of undefined的问题

头像
Aha__ha
    541712
    <!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<link rel="stylesheet" href="//cdn.bootcss.com/element-ui/1.1.2/theme-default/index.css">  
<script type="text/javascript" src="//cdn.bootcss.com/vue/2.3.4/vue.js"></script>  
<script type="text/javascript" src="//cdn.bootcss.com/element-ui/1.1.2/index.js"></script>  
<script type="text/javascript" src="//cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script> 
<script type="text/javascript" src="//cdn.bootcss.com/vue-router/2.6.0/vue-router.js"></script> 
<style>  
.el-row {  
    margin-bottom: 20px;  
    &:last-child {  
      margin-bottom: 0;  
    }  
  }  
    .login-box {  
        margin-top:20%;  
        margin-left:40%;  
    }  
</style>  
</head>  
<body>  
<div class="login-box" id="app" >  
 <el-row>  
    <el-col :span="8">  
        <el-input id="name"  v-model="name" placeholder="请输入帐号">  
            <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="请输入密码">  
            <template slot="prepend">密码</template>  
        </el-input>  
    </el-col>  
 </el-row>  
 <el-row>  
    <el-col :span="8">  
        <el-button id="login" v-on:click="check" style="width:100%" type="primary">登录</el-button>  
    </el-col>  
 </el-row>  
</div>   
</body>  
  
<script type="text/javascript">  
    new Vue({  
        el : '#app',  
        data : {  
            name : '',  
            password : ''  
        }, 
        methods : {  
            check : function(event){
                this.$router.push('index');
                //获取值  
                var name = this.name;  
                var password = this.password;  
                if(name == '' || password == ''){  
                    this.$message({  
                        message : '账号或密码为空！',  
                        type : 'error'  
                    })  
                    return;  
                }  
                var data={
                    username:name,
                    password:password
                };
                this.$http.get("login",{
                    params:data
                }).then(function (response) {
                    //成功后跳转到index界面 
                    this.$router.push('index')
                }).catch(function (response) {
                    console.error(response);
                });
            }  
        }  
    })  
      
</script>  
</html>

    this.$router跳转不了，我调试一直提示undefined。不知这样写为何会导致跳转失败，求指导。

    vue-routervue.js
    阅读 37.8k
    6 个回答
    得票最新
    头像
    boxsnake
      6.8k21249

      其中。在$http返回回调中，this指向的是$http对象而非Vue实例，有两个方法：

      方法1：在外部定义一个值指代Vue实例

      var self = this;
this.$http.get("login", {
    params: data
}).then(function(response) {
    self.$router.push('index');
}).catch(function(response) {
    console.error(response);
});

      方法2：使用ES6的箭头函数实现上下文穿透

      this.$http.get("login", {
    params: data
}).then((response) => {
    this.$router.push('index'); // 此处因为ES6箭头函数上下文穿透，this的上下文为外层的this，即Vue实例
}).catch(function (response) {
    console.error(response);
});

      Update

      针对$router为空的情况，是因为没有在Vue初始化的时候注册vue-router组件。有几种方法：

      方法1：

      var router = new VueRouter( ... );
new Vue({
    ...
    router: router
});

      方法2：

      new Vue({
    ...
    router: new VueRouter( ... ),
    ...
});
      头像
      cool_zjy
        5.6k3723

        请求回调函数中的 this 不是指向 vue 实例，尝试使用箭头函数。

        头像
        Aha__ha
          541712

          图片描述

          头像
          glitchboyl
            391
            this.$http.get("login",{
    params:data
}).then(function (response) {
    //成功后跳转到index界面 
    this.$router.push('index')  // 这个地方的this并不指向vue实例
}).catch(function (response) {
    console.error(response);
});

            解决方法:

            1)

            let self = this; // 定义一个变量指向vue实例
this.$http.get("login",{
    params:data
}).then(function (response) {
    //成功后跳转到index界面 
    self.$router.push('index')
}).catch(function (response) {
    console.error(response);
});

            2)

            this.$http.get("login",{
    params:data
}).then(response => {
    //成功后跳转到index界面 
    this.$router.push('index') // 在箭头函数内部的this并不指向这个函数 而是指向vue实例
}).catch(function (response) {
    console.error(response);
});
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题