我正在使用vue3,vue-router4进行一个项目,并且在最新的vue和vue-router中遇到了一些问题。在 vue2 和 vue-router3.0 中,当我在处理嵌套路由器时,我做了一个HOC
可以渲染component
or的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
。
希望有人可以帮助我,谢谢。