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 来实现图片的懒加载。下面是一个基本的图片懒加载的示例：

1. 安装 vue-lazyload 插件：

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

npm install vue-lazyload

或

yarn add vue-lazyload

1. 在项目入口文件（通常是 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');

1. 在模板中使用 v-lazy 指令：

<template>
  <div>
    <img v-lazy="'/path/to/image.jpg'" alt="Lazy-loaded Image">
    </div>
</template>

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

3.组件懒加载