vue-router路由懒加载

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

原创最新推荐文章于 2025-06-02 09:03:48 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Vue.js的路由懒加载特性来优化单页面应用的加载速度，通过延迟加载未使用的组件，减少初次加载时的文件大小，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js笔记 — vue-router路由懒加载

用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效，实现代码如下：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['components/Hello.vue'], resolve)
    },
    {
        path: '/about',
        component: resolve => require(['components/About.vue'], resolve)
    }
  ]
})