Vue Dynamic Layouts 两次挂载路由器视图组件

Posted 2023-02-23

【中文标题】Vue Dynamic Layouts 两次挂载路由器视图组件

【英文标题】：Vue Dynamic Layouts mounting router-view component twice

【发布时间】：2019-07-23 14:55:10

【问题描述】：

我将我的 Vue 项目设置为使用动态布局 - 即在页面之间持续存在的布局，假设新页面的布局与最后一页相同。我的问题是，当我转到具有不同布局的路由时，router-link 组件被创建和销毁，然后再次创建，这给我带来了一些问题。我的设置如下：

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,
  ,
...

一些路由器视图组件

<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>

tldr;

如果您使用动态布局设置您的项目，遵循在线教程中的任何一个，当您导航到布局与最后一页不同的路线时，新的路由器视图组件将被创建、销毁，然后再次创建。这会导致诸如在mounted() 调用上加倍等问题。

【参考方案1】：

我最终选择了嵌套（子）路由 (https://router.vuejs.org/guide/essentials/nested-routes.html)：

      path: '/portal',
      component: LayoutPortal,
      beforeEnter(to, from, next) 
        if (!store.getters.auth) 
          next('/login');
          return;
        

        next();
      ,
      children: [
        
          path: 'home',
          name: 'portal-home',
          component: PortalHome,
        ,
        
          path: 'about',
          name: 'portal-about',
          component: PortalAbout,
        ,
        ...

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

【讨论】：

不确定我是否了解如何解决这个问题。你能详细说明它的机制吗？

@AdamYoungers 基本上，如果您有一个父（布局）组件并使用子路由，则除非您转到使用完全不同父组件的路由，否则该父组件永远不会被卸载。

@AdamYoungers 例如，在我的情况下，我在父组件上有一个函数，该函数每 10 秒轮询一次后端，但是当我切换到原始布局方法。使用新的布局方法，它不会这样做，并继续像您在路由周围反弹一样正常发出请求，除非您转到完全不同的布局。

你有完整的示例代码吗？我有类似的设置，我的仍然加载两次。