vue 路由懒加载 resolve vue-router配置

最新推荐文章于 2025-04-11 17:47:28 发布

转载最新推荐文章于 2025-04-11 17:47:28 发布 · 736 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/ysx215/p/10949740.html

vue 专栏收录该内容

57 篇文章

订阅专栏

本文详细解释了Vue中使用懒加载技术对路由组件进行按需加载的方法，对比了懒加载与非懒加载的区别，介绍了如何通过require和resolve实现组件的异步加载，从而优化首页加载速度，提升用户体验。

vue 路由懒加载 resolve作用：

如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。
当你用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。

懒加载

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
 
export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path: '/about',
      name: 'About',
      component:resolve => require(['@/pages/About'],resolve)
    },
    {
      path: '/index',
      name: 'Index',
      component:resolve => require(['@/pages/Index'],resolve)
    },
    {
      path: '/product',
      name: 'Product',
      component:resolve => require(['@/pages/Product'],resolve)
    }
  ]
})

非懒加载

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/pages/About'
import Index from '@/pages/Index'
import Product from '@/pages/Product'
Vue.use(Router)
 
export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path: '/about',
      name: 'About',
      component:About
    },
    {
      path: '/index',
      name: 'Index',
      component:Index
    },
    {
      path: '/product',
      name: 'Product',
      component:Product
    }
  ]
})