Question

我看不出为什么函数没有正确地返回它的回调。

我在一条路线上有车辆清单，然后是另一条显示车辆资源的路线。

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

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（）方法，并且“响应”的控制台日志既不显示，也不显示'叫'是一个。

Answer 1

不确定它背后的逻辑，但必须在我的getVehicle响应之前使用.then（）才能工作。所以改为：

<div class="previewImages">
      <img src="/cat.png">
</div>

<div class="thumbnailPreview">
      <img src="/dog.png">
</div>

<img class="ImageAttributeList" src="/dog.png">

Answer 2

我不确定它是否适用于beforeRouteEnter防护中的函数。相反，尝试调用axios get方法，如

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

这应该有效

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

2 个答案: