使用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

ルータを定義してから、mixinで使用してください。

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