2

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

由于它是动态导入的，每次我在 Login & Register path <RouterLink :to"{name: 'Login'}" />&之间切换时<RouterLink :to"{name: 'Register'}" />，我都会再次重新渲染或动态导入布局。

我的问题是没有重新渲染或动态导入布局的更好的处理方法是什么？或者我可以将动态导入组件保存到当前的 vue 3 上下文中吗？

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;
4

1 回答 1

1

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

components: {
        layout1: defineAsyncComponent(() => import('./components/Layout1.vue')),
        layout2: defineAsyncComponent(() => import('./components/Layout2.vue')),
},
于 2021-06-12T13:47:23.347 回答