在 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() 方法捕获错误。文章来源：https://www.toymoban.com/news/detail-681718.html
需要注意的是，动态导入语法需要配合 webpack 的代码分割功能一起使用，否则无法实现按需加载的效果。文章来源地址https://www.toymoban.com/news/detail-681718.html
到了这里，关于vue 路由动态加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[VUE学习]权限管理系统前端vue实现9-动态路由，动态标签页，动态面包屑](https://imgs.yssmx.com/Uploads/2024/02/541195-1.png)
