vue 路由动态加载

在 Vue.js 中，可以使用 webpack 的动态导入语法来实现路由动态加载。下面是一个简单的示例：

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

export default routes;

在上面的代码中，我们使用了ES6中动态导入语法 import() 来导入组件。

在 import() 函数中，我们使用了 /* webpackChunkName: "chunk-name" */ 来指定每个组件的 chunk 名称。
这个语法告诉 webpack 将每个组件打包成一个单独的 chunk，并为每个 chunk 指定一个名称。这样，当我们在浏览器中加载页面时，只有需要的时候才会加载对应的 chunk。

接下来，我们将这些路由定义在一个数组中，并使用 export 关键字将它们导出。这样，我们就可以在其他地方使用这些路由了。

需要注意的是，动态导入语法需要配合 webpack 的代码分割功能一起使用，否则无法实现路由动态加载的效果。

---

动态导入语法 import

在 ES6 中，引入了动态导入语法 import()，它返回一个 Promise 对象，用于异步加载模块。

动态导入语法允许在运行时动态地加载模块，而不是在编译时静态地导入模块。这对于按需加载或延迟加载特定功能模块非常有用，可以减少应用程序的初始加载时间，并提高页面性能。

以下是动态导入语法的示例：

import('module-name')
  .then(module => {
    // 使用 module
  })
  .catch(err => {
    // 处理加载模块时发生的错误
  });

在上面的代码中，import('module-name') 返回一个 Promise 对象，该对象将在模块加载完成后解析。
在 Promise 解析时，可以通过 .then() 方法获取加载的模块，并在回调函数中使用。如果加载失败，可以通过 .catch() 方法捕获错误。

需要注意的是，动态导入语法需要配合 webpack 的代码分割功能一起使用，否则无法实现按需加载的效果。