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()语法来加载组件文件。

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

// 异步加载组件的函数
const loadComponent = (componentName) => () => import(`@/views/${componentName}.vue`);

const routes = [
  {
    path: '/',
    component: loadComponent('Home'), // 首页组件会立即加载
  },
  {
    path: '/componentA',
    component: loadComponent('ComponentA'), // 当访问 /componentA 路由时才加载 ComponentA 组件
  },
  {
    path: '/componentB',
    component: loadComponent('ComponentB'), // 当访问 /componentB 路由时才加载 ComponentB 组件
  },
];

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

export default router;

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

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