vuejs3 - vue3, vue-router4.0 instances.default 在路由匹配中未定义

Question

我正在使用vue3，vue-router4进行一个项目，并且在最新的vue和vue-router中遇到了一些问题。在 vue2 和 vue-router3.0 中，当我在处理嵌套路由器时，我做了一个HOC可以渲染componentor的router-view，但是在 vue3 和 vue-router4.0 中，我无法instances.default通过route.matched。

Vue2、Vue-Router3

export default function routeReplaceSelf(component) {
    return {
        name: "routeReplaceSelf",
        computed: {
            showChild() {
                const deepestMatchedRoute = this.$route.matched[this.$route.matched.length - 1];
                return deepestMatchedRoute.instances.default !== this;
            },
        },
        render(h) {
            const child = this.showChild ? h("router-view") : h(component);
            return h("keep-alive", [child]);
        },
    };
}

Vue3、Vue-Router4

import { h, computed, getCurrentInstance } from "vue";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
export default function routeReplaceSelf(component) {
    return {
        name: "routeReplaceSelf",
        setup(props) {
            const instance = getCurrentInstance();
            const route = useRoute();
            const router = useRouter();

            const showChild = computed(() => {
                const deepestMatchedRoute = route.matched[route.matched.length - 1].instances.default;
                return deepestMatchedRoute !== instance;
            });
            const child = showChild.value ? h("router-view") : h(component);
            return () => h("keep-alive", [child]);
        },
    };
}

结果总是得不到router-view，component原因instances.default总是undefined。

希望有人可以帮助我，谢谢。

标签： vuejs3vue-router4