实现路由懒加载的方式有哪些？

Elena_Lucky_baby2024-12-23 14:36

1函数式懒加载

使用vue的异步组件和webpack的代码分割功能，通过（）=>import()这种函数形式来定义路由组件，示例如下：

复制代码

const Home = () => import('@/views/Home.vue');
const router = new VueRouter({
  routes: [
    { path: '/', component: Home }
  ]
});

2箭头函数结合require

这种方式是利用webpack的代码分割特性，使用箭头函数和require语句来实现懒加载，任意：

复制代码

const Home = resolve => require(['@/views/Home.vue'], resolve);
const router = new VueRouter({
  routes: [
    { path: '/', component: Home }
  ]
});

3命名chunk

通过给import()函数传递一个webpackChunkName注释，可以为懒加载的代码快指定一个名称方便webpack打包后的文件中进行识别和管理，示例如下：

复制代码

const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue');
const router = new VueRouter({
  routes: [
    { path: '/', component: Home }
  ]
});