Как сбросить высоту компонента во vue3?

Question

[alestro]

Ситуация следующая: есть лайоут компонент, который рендерется один раз и при переходе между дочерними компонентами рендерет компонент, соответствующий маршруту дочерний компонент. Лайоут реализован через миддлверку ниже.

export async function loadLayoutComponent(route) {
    if (route.meta.layout) route.meta.layoutComponent
        = (await import(`../components/layouts/${route.meta.layout}.vue`)).default;
}

Темплейт моего app.vue.

<script setup>
import {useRoute} from "vue-router";
const route = useRoute();
</script>

<template>
  <component v-if="route.meta.layoutComponent" :is="route.meta.layoutComponent">
    <router-view/>
  </component>
  <router-view v-else/>
</template>

Все работает, но при переходе по маршрутам внутри лайаута по кнопке назад в браузере - текущий компонент сохраняет высоту предыдущего, из-за чего появляется скролл на разницу в высоте между компонентами.
Как можно это исправить?

Answer 1

[Владимир Коротенко]

vue изменяет высоту, это делаете вы стилями, так что добавьте в лэйоут нужный стиль

Comments

[alestro]

Это первое, что я попробовал сделать, добавил для секции контент стили

.page_content {
    max-height: max-content;
    height: max-content;
}

Эффекта это не возымело.

[alestro]

Дело было в сторонней библиотеке.