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();
},

Answer 2

您无权访问

data

内的

beforeRouteEnter

反应变量，但您可以在

next

函数内更改它们。 所以你的代码：

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) {
                let data = null
                axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                    params: {}
                })
                    .then(function (response) {
                        data = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                next((vm)=>{
                   vm.queryResult = data
                })
            },
            methods: {
                queryDB: function () {
                    axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                        params: {
                            
                        }
                    })
                        .then(function (response) {
                            queryResult = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });