vue路由懒加载

Together780

于 2022-08-05 19:29:34 发布

阅读量114

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_61766112/article/details/126184258

版权

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

// 将
// import UserDetails from './pages/UserDetails'
// 替换成
const UserDetails = () => import('./pages/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

再进一步简化代码

// 将
// import UserDetails from './pages/UserDetails'
// 替换成
 

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: () => import('./pages/UserDetails') }],
})