Vue Dynamic Layouts монтирует компонент просмотра маршрутизатора дважды

Question

Я настроил свой проект 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;

Если вы настраиваете свой проект с использованием динамических макетов, следуйте любому из ряда интерактивных руководств, когда вы переходите кПри маршруте с макетом, отличным от последней страницы, новый компонент просмотра маршрутизатора создается, уничтожается, а затем создается снова.Это вызывает такие проблемы, как удвоение вызовов mount () и многое другое.

Answer 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 на отдельные группы маршрутов и избежатьпроблема, при которой при переходе на страницу с новым макетом компонент загружается дважды.