[英]Use vue-router in a mixin
我的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:无法读取未定义的属性“ 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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.