Javascript Vue动态布局安装路由器视图组件两次

我将我的Vue项目设置为使用动态布局，也就是说，假设新页面的布局与上一页面相同，则布局会在页面之间保持不变。我的问题是，当我转到一个具有不同布局的路由时，路由器链接组件被创建和破坏，然后再次创建，这给我带来了一些问题。我的设置如下：

App.vue

<template>
  <component :is="layout">
    <router-view :layout.sync="layout" />
  </component>
</template>

<script>
import LayoutPortal from '@/layouts/LayoutPortal';
import LayoutOffline from '@/layouts/LayoutOffline';
import LayoutDefault from '@/layouts/LayoutDefault';

export default {
  name: 'App',

  components: {
    LayoutPortal,
    LayoutOffline,
    LayoutDefault,
  },
...

从“@/layouts/LayoutPortal”导入LayoutPortal；
从“@/layouts/LayoutOffline”导入LayoutOffline；
从“@/layouts/LayoutDefault”导入LayoutDefault；
导出默认值{
名称：“应用程序”，
组成部分：{
布局门户，
裁员乌托邦，
布局默认值，
},
...

某些路由器视图组件

<template>
...
</template>

<script>
import LayoutDefault from '@/layouts/LayoutDefault';

export default {
    ...

    created() {
        this.$emit('update:layout', LayoutDefault);
    },
}
</script>

<template>
  <div class="wrapper">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'layout-default',
};
</script>

...
从“@/layouts/LayoutDefault”导入LayoutDefault；
导出默认值{
...
创建（）{
此.emit（'update:layout'，LayoutDefault'）；
},
}

布局默认值

<template>
...
</template>

<script>
import LayoutDefault from '@/layouts/LayoutDefault';

export default {
    ...

    created() {
        this.$emit('update:layout', LayoutDefault);
    },
}
</script>

<template>
  <div class="wrapper">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'layout-default',
};
</script>

导出默认值{
名称：“布局默认值”，
};

太长，读不下去了

---

如果您使用动态布局设置项目，遵循联机教程中的任意一个，当您导航到布局与上一页不同的路由时，新的路由器视图组件将被创建、销毁，然后再次创建。这会导致出现诸如装载时加倍的问题（）呼叫等。

我最终选择了嵌套（子）路由（）：

---

通过这种方式，我可以加载布局作为父路由，在将逻辑输入到单独的路由组之前将其分离，并避免使用新布局的页面两次加载组件的问题。

我不确定这是如何解决问题的。你能给出它的机制的更多细节吗？@AdamYoungers基本上是，如果你有pa的话租金（布局）组件和使用子路由，父组件永远不会卸载，除非您转到使用完全不同的父组件的路由。@AdamYoungers因此，在我的例子中，我在父组件上有一个函数，它每10秒轮询一次后端，但当我在原始的布局方法。使用新的布局方法，它不会这样做，并且会在路线周围跳转时继续正常发出请求，除非您转到完全不同的布局。您是否有完整的示例代码？我有一个类似的设置，我的仍然加载两次。