vue body的背景圖片屬性設(shè)置方式
更新時間：2025年08月20日 17:24:19 作者：AI小奶龍
在Vue中,背景圖跨頁面顯示問題可通過生命周期鉤子（如mounted和beforeDestroy）實現(xiàn)動態(tài)控制,確保僅在主頁加載背景圖,登錄頁等其他頁面可移除,從而實現(xiàn)差異化樣式應(yīng)用
vue body的背景圖片屬性設(shè)置
html {
height: 100%;
}
/* 設(shè)置整個頁面的樣式 */
body{
/* 引用圖片路徑 */
background-image: url("../assets/img/shouye.jpg");
/* background-repeat只顯示一個圖片 */
background-repeat: no-repeat;
/* background-size
將一個圖片撐滿一個頁面 */
background-size: 100% 100%;
}在body中使用background-image我們會遇到以下問題
只想在一個頁面中使用這張背景圖，但是在別的頁面中也會顯示，如：
如圖，我只想在主頁面顯示這張背景圖，可是在登錄頁面中也被使用了。
后來通過查閱相關(guān)資料，我明白了vue的生命周期的使用。
在主頁面加入這兩個方法
// 組件內(nèi)路由進入組件時
beforeRouteEnter(to, from,next){
window.document.body.style.backgroundImage=''
next()
},
// 組件內(nèi)路由離開組件時
beforeRouteLeave(to, from,next){
window.document.body.style.backgroundImage='url("../assets/img/shouye.jpg")'
next()
},就可以在登錄頁面中刪除這張背景圖，不顯示。
這樣就可以在別的頁面中使用別的背景圖了。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫的小程序項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要給大家介紹了關(guān)于你不可不知的Vue.js列表渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue中為何方法要寫在methods的里面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue3中keep-alive的使用及注意事項說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue中的ref和reactive是兩種不同的數(shù)據(jù)響應(yīng)式管理方式,通過ref創(chuàng)建的響應(yīng)式對象在訪問和修改時會自動觸發(fā)重新渲染,本文給大家介紹vue中的ref/reactive區(qū)別及原理解析,感興趣的朋友跟隨小編一起看看吧2024-02-02
本文主要介紹了vue項目的創(chuàng)建的步驟(圖文教程)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了項目nginx部署到非根目錄下vue配置方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
在V8中，JavaScript的內(nèi)存空間分為棧（Stack）和堆（Heap）兩部分，垃圾回收的基本思路是：查找內(nèi)存中的所有變量，看哪些已經(jīng)不再需要，然后釋放這些變量所占用的內(nèi)存，本文就給大家梳理一下V8垃圾回收系統(tǒng),需要的朋友可以參考下2023-07-07