BeforeRouteEnter 未将数据加载到变量

Question

我已经设置了一个可以正确发送数据的 Web API，但是，我的 vuejs 应用程序有一个数据表组件，我使用 BeforeRouteEnter 钩子与 Axios 进行 API 调用，但来自响应的数据不会保存到我的数据变量。

是不是像我的数组queryResult这样的数据变量在我的get请求之后才被加载，因此它无法保存到它？我还尝试将 Axios 代码和变量更新调用为一种方法，但由于某种原因它无法识别方法 queryDB，因此它不起作用，所以它再次让我相信我的时间已经关闭。

我的代码如下：

<template id="dashboard">
    <div>
        <v-card>
            <v-card-title>
                <v-text-field v-model="search"
                              append-icon="mdi-magnify"
                              label="Search"
                              single-line
                              hide-details></v-text-field>
            </v-card-title>
            <v-data-table :headers="headers"
                          :items="queryResult"
                          :search="search"></v-data-table>
        </v-card>
    </div>
</template>

    const dashboard = Vue.component('dashboard',
        {
        template: '#dashboard',
            data() {
                return {
                    userID: 'SB',
                    password: 'Yellow',
                    search: '',
                    headers: [
                        { text: 'ID', align: 'start', filterable: true, value: 'ID'},
                        { text: 'USERNAME', value: 'USERNAME' },
                        { text: 'FIRST_NAME', value: 'FIRST_NAME' },
                        { text: 'LAST_NAME', value: 'LAST_NAME' },
                    ],
                    queryResult: [],
                }
            },
            beforeRouteEnter(to, from, next) {
                axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                    params: {}
                })
                    .then(function (response) {
                        queryResult = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                next()
            },
            methods: {
                queryDB: function () {
                    axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                        params: {
                            
                        }
                    })
                        .then(function (response) {
                            queryResult = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });

Answer 1

我认为您的意思是在您的数据出现之前加载路由。

这是有道理的，因为axios.get 是异步的。这意味着当axios.get 向服务器请求数据时，主线程仍在执行代码。然后当axios.get 收到数据时，它会触发.then 回调。

在您的情况下，您的下一个命令是next()，它告诉路由器继续前进并在路由中前进。这意味着当axios.get 正在检索您已经调用过next() 的数据时。

如果你想先等待 axios 获取数据，你需要将 next() 移动到回调函数中。

beforeRouteEnter(to, from, next) {
    axios.get(window.location.origin + '/home/DapperDatatableLoad', {
        params: {}
    })
        .then(function (response) {
            next();
            this.queryResult = response.data; //Notice that `queryResult` is referred to with `this.`
        })
        .catch(function (error) {
            next();
            console.log(error);
        });
},

另一种解决方案是使用 await 语法

async beforeRouteEnter(to, from, next) {
    try{
        let response = await axios.get(window.location.origin + '/home/DapperDatatableLoad', {
            params: {}
        });
    } catch (error){
        console.log(error);
    }
    this.queryResult = response.data;       

    next();
},