vue-router 实现路由懒加载（ 动态加载路由 ）

在Vue.js中，可以使用vue-router来实现路由懒加载，也称为动态加载路由。路由懒加载的目的是在用户访问某个路由时再加载对应的组件，而不是在应用初始化时一次性加载所有组件。这样可以提高应用的初始加载速度，只在需要时才加载对应的组件。

要实现路由懒加载，可以使用Vue提供的异步组件加载功能，结合import()函数或webpack的动态import()语法。以下是一个简单的示例来演示如何在Vue项目中实现路由懒加载：

安装vue-router：

npm install vue-router

在Vue.js中，可以使用vue-router来实现路由懒加载，也称为动态加载路由。路由懒加载的目的是在用户访问某个路由时再加载对应的组件，而不是在应用初始化时一次性加载所有组件。这样可以提高应用的初始加载速度，只在需要时才加载对应的组件。

要实现路由懒加载，可以使用Vue提供的异步组件加载功能，结合import()函数或webpack的动态import()语法。以下是一个简单的示例来演示如何在Vue项目中实现路由懒加载：

安装vue-router：

npm install vue-router

1. 创建路由懒加载的组件文件：

在你的项目中，创建对应的路由懒加载的组件文件，比如ComponentA.vue和ComponentB.vue等。

1. 配置路由：

在路由配置文件（通常是router/index.js）中，使用异步组件加载来定义路由，以实现路由懒加载。使用import()函数或webpack的动态import()语法来加载组件文件。

1. import { createRouter, createWebHistory } from 'vue-router';
2. 
3. // 异步加载组件的函数
4. const loadComponent = (componentName) => () => import(`@/views/${componentName}.vue`);
5. 
6. const routes = [
7.   {
8.     path: '/',
9.     component: loadComponent('Home'), // 首页组件会立即加载
10.   },
11.   {
12.     path: '/componentA',
13.     component: loadComponent('ComponentA'), // 当访问 /componentA 路由时才加载 ComponentA 组件
14.   },
15.   {
16.     path: '/componentB',
17.     component: loadComponent('ComponentB'), // 当访问 /componentB 路由时才加载 ComponentB 组件
18.   },
19. ];
20. 
21. const router = createRouter({
22.   history: createWebHistory(),
23.   routes,
24. });
25. 
26. export default router;

在上述代码中，我们使用了一个loadComponent函数来返回一个异步加载组件的函数。这个函数使用import()动态导入对应的组件文件。然后在路由配置中，我们将组件的值设置为loadComponent('ComponentA')和loadComponent('ComponentB')，这样在访问对应路由时才会加载相应的组件。

这样，当用户访问/componentA或/componentB路由时，对应的组件才会被动态加载，从而实现了路由懒加载的效果。其他路由（如首页）会在应用初始化时立即加载。这种方式可以提高应用的初始加载速度和性能。