Vue3中mounted阶段route.query为空，axios回调中才返回值如何解决？

该问题属于典型的时序不匹配：组件挂载完成的时机早于Vue Router完成路由参数解析注入的时机

• onMounted触发时，路由query参数还未完成绑定，因此拿到空对象
• axios.get为异步网络请求，等then回调执行时，Vue Router已经完成路由参数初始化，因此可以正常取到值
• nextTick仅处理DOM更新相关的异步时序，不涉及路由初始化逻辑，因此无法解决该问题

方法1：等待路由完全就绪后再执行初始化逻辑 #

调用router.isReady()方法，等路由初始化完成后再调用接口，该方案改动最小，适合首次加载拿参数的场景

import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

export default {
    setup() {
        const router = useRouter();
        const route = useRoute();

        onMounted(async () => {
            await router.isReady() // 等待路由初始化完成
            console.log(route.query); // 此时可以正常拿到参数
            fetchApartments();
        });
    
        function fetchApartments() {
            console.log(route.query); // 参数正常
            axios.get('/api/apartments', {
                params: route.query // 可直接传入作为请求参数
            }).then(response => {
                // 业务逻辑
            });
        }
    }
}

方法2：监听route.query变化触发请求 #

如果存在同组件内路由query动态更新的场景，可以用watch监听query，有值时自动发起请求，适配性更强

import { ref, watch, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

export default {
    setup() {
        const route = useRoute();

        // 监听query变化，有值时发起请求
        watch(() => route.query, (newQuery) => {
            if (Object.keys(newQuery).length > 0) {
                fetchApartments(newQuery)
            }
        }, { immediate: true }) // 立即执行一次，覆盖首次加载场景
    
        function fetchApartments(query) {
            axios.get('/api/apartments', {
                params: query
            }).then(response => {
                // 业务逻辑
            });
        }
    }
}

内容的提问来源于stack exchange，提问作者keizah7