Vue.js 在typescript项目的路由器中延迟加载时，Vue路由器热重新加载不工作

我是vue的新手，正在构建我的第一个应用程序。我遵循一个教程，注意到一种在路由器中延迟加载的方法：

import Vue from 'vue'
import Router from 'vue-router'
import MainContent from '@/layout/main-content.vue'
import Home from '@/views/home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
     {
       path: '/',
       component: MainContent,
       children: [
          {
             path: ''
             //This works
             component: Home
             //This doesn't work
             component: () => import('@/views/home.vue')
          },
          {
             path: 'home'
             //This works
             component: Home
             //This doesn't work
             component: () => import('@/views/home.vue')
          }
       ]
     }
  ]
})

您可以在上面的示例中看到，我展示了同步方式和异步方式。主组件有两条路径，因为我需要能够支持根“/”和“/home”作为默认路径。这不是问题所在，因为它是以同步方式工作的（另外，我还尝试了其他子路由）

---

奇怪的是，当我延迟加载时，页面在我使用浏览器工具检查之前不会刷新（热加载）。即使我在浏览器中强制刷新，它也不会出现。打开检查器时，我会在浏览器中看到主零部件。为什么我在打开inspector时只能看到主组件？

热重新加载可以完美地使用动态导入。可能与浏览器缓存有关？@MarcRo除了上面提供的代码之外，您还需要做什么？问题是屏幕刷新。因为当我打开inspector并将鼠标悬停在应该显示的元素上时，我会看到它们。问题是，在更改路由后，我看不到这一点。你能在浏览器工具中检查组件包是否已下载吗？@MarcRo-Yup，当我更改路由时，我肯定会看到组件文件下降。除非我将鼠标悬停在工具中的元素上，否则它不会在屏幕上呈现。这可能是组件中的某个问题吗？如果Vue devtools注册它，则Vue实例应正确加载。。