【日记】Vue路由懒加载写法

全栈开发日记

共 539字,需浏览 2分钟

 ·

2021-12-05 08:52

如果你的Vue项目有多个组件,当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。


路由懒加载的三种写法


// 第一种 官方写法
const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [{ path: '/foo', component: Foo }]
})



// 第二种 改良版
const router = new VueRouter({
  routes: [{ path: '/foo', component: () =>{
            return import('./Foo.vue')
      }
  }]
})



// 第三种 网传版
const router = new VueRouter({
  routes: [
      {path:'/foo', component: resolve=>require(['./Foo.vue'],resolve)}
  ]
})



浏览 27
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报