사용 VUE 라우터

Question

내가 가진 내 main.js 다음과 같이 설정 : 오류가

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 => { 
       // success_callback(response); 
      }, response => { 
       if(response.status == 404) { 
        Vue.router.push({name: '404'}); // <--- ERROR HERE 
       } 

      }).then(response => { 
       // always_callback(response); 
     }); 
    } 
    } 
}); 

const router = new VueRouter({ 
    routes: [ 
     { 
      path: '/', 
      component: Home, 
      meta: {page_title: 'Home'} 
     }, 
     // ... 
    ] 
}); 

new Vue({ 
    el: '#app', 
    template: '<App/>', 
    components: { App }, 
    router: router 
}); 

: 그래서

TypeError: Cannot read property 'push' of undefined

, 내가 전화 할 때 Vue.router가 정의되어 있지 않은 것을 알고있다 mixin 방법, 그리고 이것에 대한 해결 방법은 무언가 같은 인수로 라우터 자체를 전달하는 것입니다 this.get_req(this.$router, 'http://example.com/users/5').

하지만 나는 더 좋은 방법이 있어야한다고 생각합니다.

Answer 1

라우터를 먼저 정의한 다음 믹스 인에서 사용하십시오.

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import VueResource from 'vue-resource'; 

Vue.config.productionTip = false; 

Vue.use(VueRouter); 
Vue.use(VueResource); 

// define the router here 
const router = new VueRouter({ 
    routes: [ 
     { 
      path: '/', 
      component: Home, 
      meta: {page_title: 'Home'} 
     }, 
     // ... 
    ] 
}); 

Vue.mixin({ 
    methods: { 
    get_req: function(url) { 
     Vue.http.get(url, { 
      before(request) { 
       // before_callback(request); 
      } 
      }).then(response => { 
       // success_callback(response); 
      }, response => { 
       if(response.status == 404) { 
        // Use the router variable you just defined 
        router.push({name: '404'}); 
       } 

      }).then(response => { 
       // always_callback(response); 
     }); 
    } 
    } 
}); 


new Vue({ 
    el: '#app', 
    template: '<App/>', 
    components: { App }, 
    router: router 
});