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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在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:无法在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')。

将工作。

以上是关于如何在axios请求中使用vue路由器的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

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

vue中axios请求成功了如何把数据渲染到页面上?

Vue路由切换&Axios接口取消重复请求

vue路由变化时使用axios取消所有请求

# Vue 多模块管理路由(Router)请求(Axios)