首页 文章

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

提问于
浏览
0

我有以下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,但这两种方法都没有帮助 . 我做错了什么,如何使路由器工作 .

2 回答

  • 0

    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);
    })
    
  • 0

    在Login Vue文件中,更改代码

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

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

    你已经定义了

    让自己=这个;

    所以使用:

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

    将工作 .

相关问题