路由器级别的Vue 3动态组件

Question

我需要动态导入，例如，我有10个布局，但用户只访问了3个布局，我不应该导入所有布局，因为它消耗了不必要的资源。

由于它是动态导入的，每次我在Login&寄存器路径CCD_ 1&<RouterLink :to"{name: 'Register'}" />，我再次得到了重新发布或动态导入布局。

我的问题是，在不重新发送或动态导入布局的情况下，处理它的更好方法是什么？或者我可以将动态导入组件保存到当前的vue3上下文中吗？

App.vue这是我的应用程序，它可以观察路由器并根据route.meta.layout 切换布局

<template>
<component :is="layout.component" />
</template>
<script>
import DefaultLayout from "./layout/default.vue";
import {
ref,
shallowRef,
reactive,
shallowReactive,
watch,
defineAsyncComponent,
} from "vue";
import { useRoute } from "vue-router";
export default {
name: "App",
setup(props, context) {
const layout = shallowRef(DefaultLayout);
const route = useRoute();
watch(
() => route.meta,
async (meta) => {
if (meta.layout) {
layout = defineAsyncComponent(() =>
import(`./layout/${meta.layout}.vue`)
);
} else {
layout = DefaultLayout;
}
},
{ immediate: true }
);
return { layout };
},
};
</script>

router/index.js这是我的带有布局元的路由器

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import NotFound from "@/views/NotFound.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/login",
name: "Login",
meta: {
layout: "empty",
},
component: function () {
return import(/* webpackChunkName: "login" */ "../views/Login.vue");
},
},
{
path: "/register",
name: "Register",
meta: {
layout: "empty",
},
component: function () {
return import(/* webpackChunkName: "register" */ "../views/Register.vue");
},
},
{ path: "/:pathMatch(.*)", component: NotFound },
];
const router = createRouter({
history: createWebHistory(import.meta.env.VITE_GITLAB_BASE_PATH),
routes,
scrollBehavior(to, from, savedPosition) {
// always scroll to top
return { top: 0 };
},
});
export default router;

Answer 1

您可以在components选项中使用AsyncComponent，只需使用返回当前布局的计算属性，这将只加载当前布局，而不加载其他布局：

components: {
layout1: defineAsyncComponent(() => import('./components/Layout1.vue')),
layout2: defineAsyncComponent(() => import('./components/Layout2.vue')),
},

Answer 2

遇到这个问题，Vue核心团队的Thorsten Lünborg帮了我一把。添加v-if条件，应该可以解决它。

<component v-if="layout.name === $route.meta.layout" :is="layout">