Vue Router beforeRouteEnter API 调用响应不“工作”答案

【问题标题】：Vue Router beforeRouteEnter API call response not 'working'Vue Router beforeRouteEnter API 调用响应不“工作”
【发布时间】：2018-07-22 01:39:01
【问题描述】：

我不明白为什么函数没有正确返回它的回调。

我有一个路线上的车辆列表，然后是另一条路线来显示该车辆资源。

这就是我在单个车辆资源的单个文件组件中拥有的内容：

export default {
    data() {
        return {
            vehicle: null,
            error: null
        }
    },
    created() {

    },
    beforeRouteEnter(to, from, next) {

        function getVehicle(id) {
            console.log('called');
            return axios.get(`/api/v1/vehicles/${id}`);
        }

        getVehicle(to.params.id, (err, vehicle) => {
            console.log('response');
            next(vm => vm.setData(err, vehicle))
        });
    },
    methods: {
        setData (err, vehicle) {
            if (err) {
                this.error = err.toString();
            } else {
                this.vehicle = vehicle;
            }
        }
    }    
}

这个问题是，当单击车辆链接时，API 调用正确并返回有效响应，但未调用 next() 方法，并且未显示“响应”的控制台日志，但'称为'一个是。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

不确定其背后的逻辑，但必须使用 .then() 作为我的 getVehicle 响应，然后它才能起作用。于是改成：

getVehicle(to.params.id).then( response => {
    next( vm =>
        vm.setData(response)
    );
});

【讨论】：

这没有意义。 to.params 不应包含承诺
@Phil 好地方，来晚了！ :D 刚刚添加了正确的用法。

【解决方案2】：

我不确定它是否可以与 beforeRouteEnter 防护中的函数一起使用。而是尝试调用 axios get 方法，如

let data = axios.get('/api/v1/vehicles/${to.params.id})
next(vm.setData(err, data))

这应该可以工作

【讨论】：