vue路由懒加载，图片懒加载，组件懒加载

1.路由懒加载

方法一：

import { createRouter, createWebHistory } from 'vue-router'; const Home = () => import('./components/Home.vue'); const About = () => import('./components/About.vue'); const Contact = () => import('./components/Contact.vue'); const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router;

在上述代码中，我们使用动态导入语法 import() 来异步加载路由组件。当路由被触发时，相应的组件将被动态加载并渲染。

方法二：

import { createRouter, createWebHistory } from 'vue-router'; const Home = () => import('./components/Home.vue'); const About = () => import('./components/About.vue'); const Contact = () => import('./components/Contact.vue'); const routes = [ { path: '/', component: () => import('./components/Home.vue') }, { path: '/about', component: () => import('./components/About.vue') }, { path: '/contact', component: () => import('./components/Contact.vue') } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router;

在上述代码中，我们将组件的 component 属性设为一个函数，当路由被触发时，对应的组件才会被动态加载。

2.图片懒加载

在 Vue 3 中，可以使用 v-lazy 指令和 Intersection Observer 来实现图片的懒加载。下面是一个基本的图片懒加载的示例：

安装 vue-lazyload 插件：

在你的项目中，首先需要安装并引入 vue-lazyload 插件。你可以使用 npm 或者 yarn 来安装：

npm install vue-lazyload

或

yarn add vue-lazyload 在项目入口文件（通常是 main.js）引入并使用 vue-lazyload 插件： import { createApp } from 'vue'; import VueLazyload from 'vue-lazyload'; import App from './App.vue'; const app = createApp(App); app.use(VueLazyload); app.mount('#app'); 在模板中使用 v-lazy 指令： <template> <div> <img v-lazy="'/path/to/image.jpg'" alt="Lazy-loaded Image"> </div> </template>

在上述示例中，v-lazy 指令用于指定需要懒加载的图片路径。当图片进入视口（viewport）时，vue-lazyload 会自动加载该图片，提升页面加载速度。

3.组件懒加载