vue路由实现按需加载的多种方式

Jyann~

已于 2023-09-20 17:42:21 修改

阅读量1.8k

点赞数

分类专栏： Vue 前端文章标签： vue.js vue路由懒加载

于 2023-08-31 15:22:56 首次发布

本文链接：https://blog.csdn.net/qq_34569497/article/details/132602628

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

Vue

89 篇文章 7 订阅

订阅专栏

1.import动态导入

const Home = () => import( /* webpackChunkName: "Home" */ '@/views/Home.vue');

2.使用vue异步组件resolve

这种方式没有成功

//const 组件名 = resolve => require([‘组件路径’],resolve)
//（这种情况下一个组件生成一个js文件）
const Home = resolve => require(['../view/Home'],resolve)

3.使用webpack require.ensure()

const Home = () => require.ensure([], (require) => require('@/views/Home.vue'))

4.vue3的异步组件加载方式defineAsyncComponent

异步组件defineAsyncComponent加载不能用在首次展示或者首次重定向的页面

import { defineAsyncComponent } from 'vue'

const ExcelPreview = defineAsyncComponent(() =>
import( /* webpackChunkName: "ExcelPreview" */ '@/views/ExcelPreview.vue')
)

但是使用会报警告：暂时不知道为什么

[Vue Router warn]: Component "default" in record with path "/test" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".