路由器视图内容与vue + vue路由器+ prerender-spa-plugin重复

Question

我在这里用vuetify，打字稿和vue-router创建了一个vue项目：

https://github.com/RudolfVonKrugstein/vue-prerender-test

我添加了prerender-spa-plugin。为此，我在所有路由中添加了data-view，并将其放入vue.config.js：

// vue.config.js
const path = require('path');
const PrerenderSpaPlugin = require('prerender-spa-plugin');

const productionPlugins = [
  new PrerenderSpaPlugin({
    staticDir: path.join(__dirname, 'dist'),
    routes: ['/', '/about'],
    postProcess(renderedRoute) {
      renderedRoute.html = renderedRoute.html
          .replace(/<script (.*?)>/g, `<script $1 defer>`)
          .replace(`id="app"`, `id="app" data-server-rendered="true"`)

      return renderedRoute
    },
    renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
      // We need to inject a value so we're able to
      // detect if the page is currently pre-rendered.
      inject: {},
      // Our view component is rendered after the API
      // request has fetched all the necessary data,
      // so we create a snapshot of the page after the
      // `data-view` attribute exists in the DOM.
      renderAfterElementExists: `[data-view]`,
    }),
  }),
];

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(...productionPlugins);
    }
  },
}

现在，当我使用并运行测试网络服务器来构建它时：

> yarn build
> cd dist
> python3 -m http.server

然后直接打开“关于”页面http://localhost:8000/about，我看到内容重复了：

多做一点实验，我可以得出结论，只是<router-view/>的内容被重复了。另外，当仔细观察网页的显示方式时，我注意到从一开始就有一个“关于页面”（我想是预渲染的页面），然后在其下创建了第二个页面。

所以我的猜测是，vue-router不会取代<router-view/>的当前内容，而是在其下面创建第二个实例。

为什么会这样？那我该怎么办？