Javascript 如何在axios请求中使用vue路由器

我有以下app.js文件作为主要的Vue组件

import './bootstrap';
import router from './routes';

new Vue({
    el: '#app',
    router: router

});

我的bootstrap.js如下

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

// Global variable for API access
window.hostname = 'https://city.molotex.ru/cgi-bin/citygate.py?';

// Global variable for VueJS
window.Vue = Vue;

// Vue router
Vue.use(VueRouter);

//Vue Resource
var VueResource = require('vue-resource');
Vue.use(VueResource);

// axios
window.axios = axios;

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

我的登录Vue如下所示：

<template>

                        <form class="form-horizontal" role="form" method="POST" action="login">

                            <div class="form-group">
                                <label for="email" class="col-md-4 control-label">Логин (email)</label>

                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control" name="email" v-model="email">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="password" class="col-md-4">Пароль</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control" name="password" v-model="password">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-4">
                                    <button type="button" v-on:click="login" class="btn btn-primary">
                                        Login
                                    </button>
                                </div>
                            </div>
                        </form>

</template>

<script>
    export default {
        mounted() {
            console.log('Component is mounted.');
        },

        data() {
            return {
                email: '',
                password: '',

                response_key: ''
            }
        },

        methods: {
            login() {
                let self = this;

                axios.post('/login', {
                    email: this.email,
                    password: this.password
                }).then(function (response) {
                    self.response_key = response.data.result;
                    this.$router.push('/user_main_page');
                        console.log(response);
                }).catch(function (error) {
                        console.log(error);
                });
            }
        }
    }
</script>

import VueRouter from 'vue-router';

let routes = [
    {
        path: '/',
        component: require('./components/Example.vue')
    },
    {
        path: '/about',
        component: require('./components/About.vue')
    },
    {
        path: '/login',
        component: require('./components/Login.vue')
    },
    {
        path:'/user_main_page',
        component: require('./components/UserMainPage.vue')
    }
];

export default new VueRouter({
    routes
});

但当我出现以下错误时：

TypeError:无法读取未定义的属性“$router” app.js:4341 在

我尝试了不同类型的路由，例如： 将全局路由变量用作： window.router=VueRouter

或者在组件内部导入VueRouter，但这两种方法都没有帮助。我做错了什么，如何让路由器工作。

1:

then(function (response) {
   self.response_key = response.data.result;
   this.$router.push('/user_main_page');
   console.log(response);
}.bind(this))

2： 在ES6中：

1：

2： 在ES6中：

---

在登录Vue文件中，更改代码

this.$router.push('/user_main_page');

到

您已经定义了

让自我=这个

因此，使用：

self.$router.push（'/user_主页面'）

---

将正常工作。

在登录Vue文件中，更改代码

this.$router.push('/user_main_page');

到

您已经定义了

让自我=这个

因此，使用：

self.$router.push（'/user_主页面'）

---

将起作用。

我假设您发布的代码就是所有代码，并且您遇到的错误可以在登录Vue组件的此块中找到，您在该块中引用了$router变量

    axios.post('/login', {

        email: this.email,
        password: this.password

    }).then(function (response) {

        self.response_key = response.data.result;
        this.$router.push('/user_main_page');
        console.log(response);

    }).catch(function (error) {

        console.log(error);
    });

尽管此.$router是访问路由器依赖项的正确语法，但使用正则函数表达式在回调函数中调用它会创建一个到“this”对象的新绑定，而不是Vue对象本身

您有两个选项来解决此问题：

将对象引用存储到回调函数外部的变量vm

创建函数时，请使用箭头语法，以便不会覆盖对“this”的引用。（参考资料：）

---

我假设您发布的代码就是所有代码，您遇到的错误可以在登录Vue组件的这个块中找到，在这里您引用$router变量

    axios.post('/login', {

        email: this.email,
        password: this.password

    }).then(function (response) {

        self.response_key = response.data.result;
        this.$router.push('/user_main_page');
        console.log(response);

    }).catch(function (error) {

        console.log(error);
    });

尽管此.$router是访问路由器依赖项的正确语法，但使用正则函数表达式在回调函数中调用它会创建一个到“this”对象的新绑定，而不是Vue对象本身

您有两个选项来解决此问题：

将对象引用存储到回调函数外部的变量vm

创建函数时，请使用箭头语法，以便不会覆盖对“this”的引用。（参考资料：）

---

this.$router

应该是

self.$router

this.$router

应该是

self.$router

    const vm = this;
    axios.post('/login', {

        email: this.email,
        password: this.password

    }).then(function (response) {

        self.response_key = response.data.result;
        vm.$router.push('/user_main_page');
        console.log(response);

    }).catch(function (error) {

        console.log(error);

    });

     axios.post('/login', {
         email: this.email,
         password: this.password
     }).then(response => {

         self.response_key = response.data.result;
         this.$router.push('/user_main_page');
         console.log(response);

     }).catch(error => {

         console.log(error);

     });