Vue路由切换问题

Question

问题如下所示

都是默认定位，没有ajax请求。

第一个问题：为什么首页的header部分被挤下来了？

第二个问题：为什么切换的时候，内容都没有了？点击首页的时候，分类页面内容消失，切换到首页页面的过程中，首页内容也是为空，等到完全切换之后，才显示。

大致布局如下

Home组件

<template>
    <div class="home">
        <header class="home-header">
            // header内容
        </header>
        <div class="scroll-box">
            // 中间内容部分
        </div>
    </div>
</template>

CSS

.home-header{
    background: #f2f2f2;
}
.scroll-box{
    position: absolute;
    left: 0;
    right: 0;
    top: 2.3833rem;
    bottom: 1.43rem;
    overflow-y: auto;
}

Answer 1

1. css写的有问题吧，header固定在顶部，外部盒子x轴overflow-scroll，这样就不会；
2. 如果有请求的话，可能是获取内容需要一定的时间，此时已办加一个loading效果修饰，但既然都是本地，应该不存在这个问题，不知道你怎么写的，不好猜

Answer 2

首先来说，是css布局的问题，分别加上clear:both试试，先清除浮动
数据的问题的话，看看名字或者id写没写多

Answer 3

感觉第一个问题和第二个问题是同一个问题。对于这个过程的生命周期的不了解导致的vue渲染的问题。还是建议用该公网服务器或者frp给个地址看下。