axue要求内のvue routerの使い方

Question

私は以下のapp.jsファイルをメインの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 
}); 

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

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

}); 

マイbootstrap.jsは私のログインVueのは、次のされて、次の

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'; 

ですしかし、私は次のエラーがあります：

はTypeError：プロパティを読み取ることができませんapp.jsで未定義 の '$ルータ' としてグローバルルートの変数を使用して ： window.router = VueRouter

で4341 私は、次のようなルーティングのさまざまな種類を試してみました;

またはコンポーネント内でVueRouterをインポートすることはできませんが、どちらのアプローチも役に立ちませんでした。私は間違って何をしているのですか、ルータを動作させる方法。

Answer 1

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