【vue3｜vue-router4】component(resolve) {...}修改组件引入方式

博客主页：我的主页
欢迎点赞 收藏 留言 欢迎讨论！
本文由 【泠青沼~】 原创，首发于 CSDN
由于博主是在学小白一枚，难免会有错误，有任何问题欢迎评论区留言指出，感激不尽！个人主页

---

---

一、环境

vue:3.2.13
vue-router::4.0.3
vuex:4.1.0

二、component(resolve) {…}作用

component(resolve) {...}这块代码的主要作用是根据不同的component开头名字引入不同目录下的.vue文件

component(resolve){
               if(component.startsWith("Home")){
               require(['../views/'+component+'.vue'],resolve)
                  }
                  else if(component.startsWith("Emp")){require(['../views/emp/'+component+'.vue'],resolve)
                  }else if(component.startsWith("Per")){
                      require(['../views/per/'+component+'.vue'],resolve)
                  }else if(component.startsWith("Sal")){
                      require(['../views/sal/'+component+'.vue'],resolve)
                  }else if(component.startsWith("Sta")){
                     require(['../views/sta/'+component+'.vue'],resolve)
                  }else if(component.startsWith("Sys")){
                      require(['../views/sys/'+component+'.vue'],resolve)
                  }
}

以上代码出现问题Uncaught (in promise) TypeError: Cannot read properties of undefined ，Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'catch'

修改为：新版本的导入方式与之前的引入方式不同

component(resolve){
                if(component.startsWith("Home")){
                    return import('../views/'+component)
                }else if(component.startsWith("Emp")) {
                    return import('../views/emp/'+component)
                }else if(component.startsWith("Per")){
                    return import('../views/per/'+component)
                }else if(component.startsWith("Sal")){
                    return import('../views/sal/'+component)
                }else if(component.startsWith("Sta")){
                    return import('../views/sta/'+component)
                }else if(component.startsWith("Sys")){
                    return import('../views/sys/'+component)
                }
            }

三、路由懒加载

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

Vue Router 支持开箱即用的动态导入：

const UserDetails = () => import('./views/UserDetails.vue')

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

component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据

const UserDetails = () =>
  Promise.resolve({
    /* 组件定义 */
  })

参考：路由懒加载