typescript - 视图 | 路由器视图 | 组件创建和挂载的生命周期被触发了两次

Question

我正在开发一个 webapp，我在本地/开发服务器和生产上有不同的行为。在生产中，vue-router 加载我的组件，但创建和安装被触发两次。在本地和开发服务器上，它只被触发一次。

我试图用 fiddler 调试生产代码并添加控制台日志来检查它。这是一个截图

图中我们可以看到，在我的组件ProductListPage.vue中，created和mounted被调用了两次。但它根本不会调用 beforeDetroy 或 detroyed 。

这是App主模板

<template>
  <div id="app">
   <router-view />
   <PageLoader />
  </div>
</template>

这是路由器的片段

{
   path: 'my_path/(.*)?',
   name: 'ProductListPage',
   component: () => import('@/mypath/ProductListPage.vue'),
   beforeEnter: (to, from, next) => {
      /* fetch data */
      fetchData().finally(next);
   }
}

这个 beforeEnter 的代码在 SSR 上被调用并且数据在 CSR 上被水合

问题是组件 ProductListPage.vue 的“beforeCreate”、“created”和“mounted”被调用了两次，但它根本没有调用“beforeDestroy”和“destroy”。

我对部署在生产环境中的生产代码有这种行为，但在本地和演示环境中我没有这个问题。

是 vue-router 的问题/错误还是我错过了什么？

标签： typescriptvue.jsvuexvue-routerproduction