（二十一）路由组件的懒加载

老怪兽

发布于 2023-02-22 18:43:57

3060

发布于 2023-02-22 18:43:57

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

路由组件的懒加载

说明

我们之前使用过组件异步加载，现在我们还可以使用路由懒加载，进一步优化项目

一、不使用懒加载

import BlogListPage from "./pages/BlogListPage.vue";
import BlogPostPage from "./pages/BlogPostPage.vue";

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    component: BlogListPage,
  },
  {
    path: "/:postId",
    component: BlogPostPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

可以看到所有的组件在页面一加载的时候就全部都加载完了

二、使用路由懒加载

const BlogListPage = () => import("./pages/BlogListPage.vue");
const BlogPostPage = () => import("./pages/BlogPostPage.vue");

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    component: BlogListPage,
  },
  {
    path: "/:postId",
    component: BlogPostPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;