Vue 中 vue-router 实现路由懒加载(动态加载路由)？

在 Vue 中，你可以使用路由懒加载来动态加载路由组件，以优化应用程序的性能，避免一次性加载所有路由组件。这可以通过 Webpack 的动态 import 特性实现。

路由懒加载的步骤：

1. 安装 babel-plugin-syntax-dynamic-import：

   npm install babel-plugin-syntax-dynamic-import --save-dev
   

   Bash

   Copy

2. 在 babel.config.js 中配置插件：

   module.exports = {
     plugins: ['syntax-dynamic-import']
   };
   

   JavaScript

   Copy

3. 在路由配置中使用动态 import：

   import Vue from 'vue';
   import Router from 'vue-router';
   
   Vue.use(Router);
   
   const router = new Router({
     routes: [
       {
         path: '/about',
         name: 'About',
         component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
       },
       {
         path: '/contact',
         name: 'Contact',
         component: () => import(/* webpackChunkName: "contact" */ './views/Contact.vue')
       },
       // 其他路由...
     ]
   });
   
   export default router;
   

   JavaScript

   Copy

在上述代码中，import() 函数被用于动态导入组件。Webpack 会将每个 import() 函数的内容拆分为单独的 bundle，实现了按需加载路由组件。

注意，在每个 import() 中可以使用注释（如 /* webpackChunkName: "about" */）来指定拆分出的 bundle 名称，方便在构建过程中识别和调试。

通过路由懒加载，你可以按需加载路由组件，减少初始加载时的资源大小，提高页面加载性能。