我的 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
所以,我知道当我调用 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
});
关于javascript - 在 mixin 中使用 vue-router,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47098925/