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

Posted 2021-04-06

我有以下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：无法在app.js读取未定义的属性'$ router'：4341 at

我尝试了不同类型的路由，例如：使用全局路由变量：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中：

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

另一答案

在Login Vue文件中，更改代码

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

至

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

你已经定义了

让自己=这个;

所以使用：

自$ router.push（ '/ user_main_page'）。

将工作。