路由的默认 vue-cli 延迟加载代码在定义为 lambda 时不起作用

Posted 2023-02-22

【中文标题】路由的默认 vue-cli 延迟加载代码在定义为 lambda 时不起作用

【英文标题】：Default vue-cli lazy load code for route does not work when defined as lambda

【发布时间】：2020-11-10 04:14:52

【问题描述】：

我使用 vue-cli 搭建了一个新的 Typescript 项目，并指定它应该包含 vue-router。

这会自动生成一个router/index.ts，其路由器配置如下所示：

const routes: Array<RouteConfig> = [
  
    path: '/',
    name: 'Home',
    component: Home,
 ,
  
    path: '/about',
    name: 'About',
    component: () =>  import(/* webpackChunkName: "about" */ '../views/About.vue') ,
  
]

这个文件编译得很好，正如人们所期望的那样。但是，当我尝试使用 <router-link> 调用路由时，关于页面不会呈现。我可以确认路由正在被调用，因为如果我在上面的导入 lambda 中添加 console.log('x')，我会在控制台中看到“x”，但从不调用 About 组件构造函数，并且不会呈现 About 内容。

但是，如果我将index.ts 调整如下（根据docs），则路线可以正常工作并显示视图：

const AboutRoute = () => import('../views/About.vue')

const routes: Array<RouteConfig> = [
  
    path: '/',
    name: 'Home',
    component: Home,
 ,
  
    path: '/about',
    name: 'About',
    component: AboutRoute,
  
]

谁能解释为什么第二个版本有效，但不是第一个，因为它们似乎与我相同。

谢谢 伊恩

【问题讨论】：

这能回答你的问题吗？ Curly Brackets in Arrow Functions

【参考方案1】：

您的第一个解决方案不起作用，因为它没有返回导入。

在Javscript中，当你在函数中添加括号 时，它不会自动返回结果，你需要自己添加return这个词。所以要么不加括号，要么加return：

方法一：

component: () => 
  return import(
    /* webpackChunkName: "about" */ 
    '../views/About.vue'
  )

方法二：

component: () => import(
  /* webpackChunkName: "about" */ 
  '../views/About.vue'
)