title: How to use vue router inside axios request
body: <p>I have the following app.js file as main Vue component.</p>
  
  <pre><code>import './bootstrap';
  import router from './routes';
  
  new Vue({
      el: '#app',
      router: router
  
  });
  </code></pre>
  
  <p>My bootstrap.js is the following</p>
  
  <pre><code>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';
  </code></pre>
  
  <p>My Login Vue is the following:</p>
  
  <pre><code>&lt;template&gt;
  
                          &lt;form class="form-horizontal" role="form" method="POST" action="login"&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;label for="email" class="col-md-4 control-label"&gt;Логин (email)&lt;/label&gt;
  
                                  &lt;div class="col-md-6"&gt;
                                      &lt;input id="email" type="email" class="form-control" name="email" v-model="email"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;label for="password" class="col-md-4"&gt;Пароль&lt;/label&gt;
  
                                  &lt;div class="col-md-6"&gt;
                                      &lt;input id="password" type="password" class="form-control" name="password" v-model="password"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-md-8 col-md-offset-4"&gt;
                                      &lt;button type="button" v-on:click="login" class="btn btn-primary"&gt;
                                          Login
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      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);
                  });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And my routes file is the following:</p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p>But when I have the following error:</p>
  
  <p>TypeError: Cannot read property '$router' of undefined
      at app.js:4341
      at </p>
  
  <p>I tried different types of routing such as:
  using global route variable as:
  window.router = VueRouter;</p>
  
  <p>or importing VueRouter inside the component, but neither of this approaches helped. What am I doing wrong, how to make Router work.</p>