为何切换到别的页面再切换回来时样式乱了？

Question

<div class="tableTop">
    <el-form :inline="true" class="searchFormu searchCommon">
        <el-form-item label="书名">
            <el-input v-model="bookname" ref="booknameInput" placeholder="请输入书名" @keyup.enter.native="handleEnter" clearable @clear="handleClear"></el-input>
        </el-form-item>

        <el-form-item label="所属类别">
            <el-select class="typeSelect" v-model="bookcategory" ref="bookcategoryInput" @change="selectChange" placeholder="请所属部门" style="width: 160px;" clearable>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item style="margin-right:0;">
            <el-button type="primary" icon="search" :loading="isQuery" @click="searchHandler">查询</el-button>
            </el-form-item>
        </el-form>
</div>

.tableTop {
padding: 20px 10px 0px;
}

.searchFormu {

float: left;
padding: 0;

}

Answer 1

应该是scoped惹的祸,别的页面有这个类名,页面返回来的时候就是那个页面相同类名的样式

Answer 2

是不是其他页面也有同样的css类名，但是不同的样式

Answer 3

style 后面要跟scoped，不跟就乱，别问我为什么

Answer 4

要么每个页面用唯一的类名，要么加上scoped 在编译的时候会给你添加上hash作为区别