首頁猿問 Vue...

Vue 各組件為body設(shè)置css樣式的問題

JavaScript

胡說叔叔 2019-02-13 13:18:54

1.需求：不同組件的body，背景色不一樣。2.參考的解決方案：<script>export default { //...前面的省略 //通過兩個鉤子函數(shù)來添加移除class改變顏色 beforeCreate: function() { document.getElementsByTagName("body")[0].className="add_bg"; }, beforeDestroy: function() { document.body.removeAttribute("class","add_bg"); }}</script><style>.add_bg{ background: #f0f0f0;}</style>3.問題：通過 <router-link>切換頁面的時候，進(jìn)入頁面并不會執(zhí)行上述操作，但是點(diǎn)擊瀏覽器的刷新卻會執(zhí)行。是因?yàn)殂^子函數(shù)選錯了嗎?

查看完整描述

2 回答

慕碼人8056858

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超6個贊

鉤子函數(shù)選擇錯誤，解決方法：

mounted: function() {

document.getElementsByTagName("body")[0].className="add_bg";

}

反對回復(fù) 2019-02-24

慕森王

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個贊

有一個辦法是 vuex，其實(shí)不用設(shè)置是body，設(shè)置 id="app"的就可以。
在app.vue中computed一個變量比如叫 color，這個變量存儲的是不同的頁面應(yīng)該顯示的背景色，
然后<div id="app" :style={background:color}></div>，即給他綁定一個style，每次路由跳轉(zhuǎn)時，提交commit去修改這個state，即可實(shí)現(xiàn)效果。