路由懒加载

最新推荐文章于 2025-06-02 09:03:48 发布

开发小途

最新推荐文章于 2025-06-02 09:03:48 发布

阅读量454

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_54007573/article/details/139455414

在 Vue.js 中，路由懒加载（也称为代码分割）是一种优化策略，它允许你将 Vue 组件分割成不同的代码块，并在需要时按需加载它们。这有助于减少初始加载时间，提高用户体验。

Vue Router 支持 Webpack 的动态 import() 语法来实现路由懒加载。以下是如何在 Vue 项目中使用路由懒加载的步骤：

确保你的项目已经设置了 Webpack：Webpack 是 Vue CLI 项目的默认打包工具，它支持动态 import() 语法。
在路由配置文件中使用动态 import()：在你的路由配置文件中（通常是 src/router/index.js），你可以使用动态 import() 语法来加载组件。

	`import Vue from 'vue'`
	`import Router from 'vue-router'`

	`Vue.use(Router)`

	`const router = new Router({`
	`routes: [`
	`{`
	`path: '/',`
	`name: 'home',`
	`component: () => import('@/views/Home.vue') // 使用动态 import()`
	`},`
	`{`
	`path: '/about',`
	`name: 'about',`
	`component: () => import('@/views/About.vue') // 使用动态 import()`
	`},`
	`// 其他路由...`
	`]`
	`})`

	`export default router`

注意：@ 符号是 Vue CLI 项目的别名，它通常指向 src 目录。所以 @/views/Home.vue 会被解析为 src/views/Home.vue。
3. 构建你的项目：当你运行 npm run build 或 yarn build 命令时，Webpack 会自动将你的组件分割成不同的代码块，并在需要时加载它们。
4. 查看构建结果：你可以在构建后的 dist 目录（或你指定的其他目录）中查看生成的 HTML 和 JavaScript 文件。你应该会看到除了主 JavaScript 文件之外，还有一些以组件名称命名的代码块文件（例如 Home.js、About.js 等）。
5. 在浏览器中测试：在浏览器中打开你的应用，并检查网络请求。你应该会看到，当你访问不同的路由时，只有相应的组件代码块文件会被加载。