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

【问题标题】：Vue 3 dynamic components at router level路由器级别的 Vue 3 动态组件
【发布时间】：2021-08-29 02:29:45
【问题描述】：

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

由于它是动态导入的，每次我在登录和注册路径<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;

【问题讨论】：

<component :is="layout.component"> <router-view></router-view> </component>怎么样
不，<router-view></router-view> 放在我的布局下...
我觉得你不需要动态导入布局
@BoussadjraBrahim 怎么样？为什么？我需要不同路线的不同布局
好的，我明白了。但是，我仍然需要动态导入，例如。我有 10 个布局，但用户只访问了 3 个布局，我不应该导入所有布局，因为它消耗了不必要的资源，谢谢！

标签： vue.js vue-router vuejs3 vue-router4

【解决方案1】：

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

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

【讨论】：