Vue项目hireABikePage页面刷新时Navbar等Div尺寸异常求助

问题情况 #

• 仅hireABikePage页面刷新时出现Navbar等Div尺寸异常，首页index.vue完全正常
• 即使删除该页面所有业务代码，只保留Navbar组件，异常仍会出现，只是持续时间缩短
• 已排查确认无类名重复冲突，问题仍未解决

涉事页面代码（hireABikePage.vue） #

<template>
    <div>
        <div class="container-fluid">
            <div class="row d-flex  align-items-center">
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Ridley Helium X Ultegra</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€30</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle2.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Cube e-bike Acid Hybrid ONE 400</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€25</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle3.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Ridley Fenix SL Disc 105</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€28</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle3.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Ridley lala model x</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€35</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'hireABikePage'
}
</script>

<style>
    .card{
        width: 30rem !important;
        height: auto !important;
    }
    .card img{   
        max-width: 85%;
        height: 25rem;
        width: 25rem;
    }
    .item-details{
        text-align: center;
    }
    .item-title{
        font-weight: bold;
        padding-bottom: 1rem;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 2rem;
        margin-left: 2rem;
    }
    .item-price{
        display: inline-block;
        color: white;
        background-color: var(--color-dark-blue);
        font-size: 5rem;
        font-weight: bold;
        padding-right: 2rem;
        padding-left: 2rem;
        border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
        vertical-align: middle;
    }
    .item-prefix{
        display: inline-block;
        color: orange;
        font-size: 2rem;
        font-weight: bold;
    }
</style>

状态截图 #

• 异常状态：
• 正常状态：

可行的解决办法 #

1. 解决图片加载导致的布局跳动 #

页面中固定尺寸的图片加载时会临时占用空间，引发布局重排挤压Navbar。给卡片设置最小高度，提前预留空间：

.card {
    width: 30rem !important;
    height: auto !important;
    min-height: 42rem; /* 根据图片+标题+价格的总高度设置，避免布局跳动 */
}

同时给图片添加object-fit确保比例，防止变形：

.card img {
    max-width: 85%;
    height: 25rem;
    width: 25rem;
    object-fit: cover;
}

2. 强制Navbar重排 #

Navbar可能因渲染时机晚于页面内容，导致初始布局计算错误。在Navbar组件的mounted钩子中触发一次窗口 resize 事件：

// Navbar组件的script部分
mounted() {
    this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'));
    });
}

3. 固定Navbar布局优先级 #

给Navbar容器添加固定定位和最小高度，确保其不被页面内容挤压：

/* 替换为你的Navbar实际类名 */
.navbar {
    min-height: 6rem;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #fff; /* 确保背景覆盖下方内容 */
}

4. 关闭该页面的路由过渡动画 #

如果项目使用了路由过渡，可能在刷新时过渡效果引发布局异常。给hireABikePage单独禁用过渡：

<!-- 路由视图组件中修改 -->
<router-view v-slot="{ Component }">
    <transition v-if="$route.name !== 'hireABikePage'" name="your-transition-name">
        <component :is="Component" />
    </transition>
    <component v-else :is="Component" />
</router-view>

内容的提问来源于stack exchange，提问作者Emircan