Javascript 在mixin中使用vue路由器

我的

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

从“Vue”导入Vue
从“vue路由器”导入VueRouter
从“vue资源”导入VueResource；
Vue.config.productionTip=false；
Vue.use（VueRouter）；
Vue.use（VueResource）；
米辛({
方法：{
获取请求：函数（url）{
Vue.http.get（url{
在（请求）之前{
//回调前（请求）；
}
})。然后（响应=>{
//成功回调（应答）；
}，回应=>{
如果（response.status==404）{
Vue.router.push（{name:'404'}）；//{
//始终返回（响应）；
});
}
}
});
常量路由器=新的VueRouter({
路线：[
{
路径：“/”，
组成部分：家庭，
meta:{page_title:'Home'}
},
// ...
]
});
新Vue({
el:“#应用程序”，
模板：“”，
组件：{App}，
路由器：路由器
});

错误是：

TypeError:无法读取未定义的属性“push”

因此，我知道当我调用mixin方法时，

Vue.router

没有定义，我知道一个解决方法是将路由器本身作为参数传递，就像

this.get_req（this.$router，'http://example.com/users/5）

---

但我相信一定有更好的方法。

首先定义路由器，然后在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
});

从“Vue”导入Vue
从“vue路由器”导入VueRouter
从“vue资源”导入VueResource；
Vue.config.productionTip=false；
Vue.use（VueRouter）；
Vue.use（VueResource）；
//在这里定义路由器
常量路由器=新的VueRouter({
路线：[
{
路径：“/”，
组成部分：家庭，
meta:{page_title:'Home'}
},
// ...
]
});
米辛({
方法：{
获取请求：函数（url）{
Vue.http.get（url{
在（请求）之前{
//回调前（请求）；
}
})。然后（响应=>{
//成功回调（应答）；
}，回应=>{
如果（response.status==404）{
//使用刚才定义的路由器变量
push（{name:'404'}）；
}
})。然后（响应=>{
//始终返回（响应）；
});
}
}
});
新Vue({
el:“#应用程序”，
模板：“”，
组件：{App}，
路由器：路由器
});