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

Question

我使用 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> 调用路由时，“关于”页面不会呈现。我可以确认正在调用路由，因为如果我将 console.log('x') 添加到上面的 import lambda 中，我会在控制台中看到 '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,
  }
]

任何人都可以解释为什么第二个版本有效，但第一个版本无效，因为它们看起来与我相同。

谢谢伊恩

Answer 1

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

在 Javscript 中，当您向函数添加方括号 { } 时，它不会自动将结果 return，您需要自己添加 return 单词。所以要么不加括号要么加 return:

方法一：

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

方法二：

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

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

Default vue-cli lazy load code for route does not work when defined as lambda

vue.js

vue-router

vue-cli

方法一：

方法二：