例子：

<template> <div class="finish-wrap">  <div class="finish-header">   <div class="finish-img">   </div>  </div>  <div class="finish-tip">   支付成功  </div>  <div class="finish-footer">    <router-link to="/">學車所需資料</router-link>    <span>     <router-link to="/">學車考照流程</router-link>    </span>  </div> </div></template>

1.如果直接在css中設置body的background-color，會導致其他頁面的背景色響應改變，所以不可取；

2.如上面例子如果設置.finish-wrap的背景色以及高度為100%時，會發現只是一部分的背景色發現改變，卻不能使整個屏幕背景色變化；

原因：打開app.vue，你會看到

<template>    <div>     <router-view></router-view>    </div>   </template>

原因就是這里還有一層div，所以你改變的不是最外層的div背景色，但是你有不能修改這里，所以：

解決方法：

我們要讓.finish-wrap脫離文檔流，為他添加個fixed屬性，最后結果：

.finish-wrapbackground-color rgb(255,255,255)height: 100%position: fixedwidth: 100%

以上這篇Vue-cli中為單獨頁面設置背景色的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。