title: Use vue-router in a mixin
body: <p>I have my <code>main.js</code> set up like the following:</p>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  import VueResource from 'vue-resource';
  
  Vue.config.productionTip = false;
  
  Vue.use(VueRouter);
  Vue.use(VueResource);
  
  Vue.mixin({
    methods: {
      get_req: function(url)  {
          Vue.http.get(url, {
              before(request) {
                  // before_callback(request);
              }
              }).then(response =&gt; {
                  // success_callback(response);
              }, response =&gt; {
                  if(response.status == 404) {
                      Vue.router.push({name: '404'}); // &lt;--- ERROR HERE
                  }
  
              }).then(response =&gt; {
                  // always_callback(response);
          });
      }
    }
  });
  
  const router = new VueRouter({
    routes: [
          {
              path: '/',
              component: Home,
              meta: {page_title: 'Home'}
          },
          // ...
      ]
  });
  
  new Vue({
    el: '#app',
    template: '&lt;App/&gt;',
    components: { App },
    router: router
  });
  </code></pre>
  
  <p>The error is: </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'push' of undefined</p>
  </blockquote>
  
  <p>So, I know that <code>Vue.router</code> is not defined when I call the mixin method, and I know that a workaround for this is to pass the router itself as argument like something <code>this.get_req(this.$router, 'http://example.com/users/5')</code>.</p>
  
  <p>But I trust that there must a better way.</p>