首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在混合器中使用vue-路由器

在混合器中使用vue-路由器
EN

Stack Overflow用户
提问于 2017-11-03 15:10:33
回答 1查看 2.6K关注 0票数 0

我的main.js设置如下:

代码语言:javascript
复制
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:无法读取未定义的属性“push”

所以,我知道当我调用Vue.router方法时没有定义它,而且我知道解决方法是将路由器本身作为参数传递,就像this.get_req(this.$router, 'http://example.com/users/5')一样。

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

EN

回答 1

Stack Overflow用户

发布于 2017-11-03 15:13:00

首先定义路由器,然后在混合器中使用它。

代码语言:javascript
复制
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
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47098925

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档