鍍金池/ 問答/HTML/ Vue 各組件為body設(shè)置css樣式的問題

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

1.需求：不同組件的body，背景色不一樣。

2.參考的解決方案：

<script>
export default {
  //...前面的省略
  //通過兩個(gè)鉤子函數(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>切換頁(yè)面的時(shí)候，進(jìn)入頁(yè)面并不會(huì)執(zhí)行上述操作，但是點(diǎn)擊瀏覽器的刷新卻會(huì)執(zhí)行。是因?yàn)殂^子函數(shù)選錯(cuò)了嗎?

回答
編輯回答
熊出沒

可以在路由的 meta 里面為每一個(gè)路由設(shè)置不同的背景色,在 route.beforEach遍歷內(nèi)部為 body 更換背景色

2017年2月18日 08:31
編輯回答
扯不斷

是不是設(shè)置了keepalive 那樣的話需要在activated也寫上處理程序

2018年9月11日 19:21
編輯回答
笑浮塵

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

2018年5月31日 20:03
編輯回答
維她命

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

mounted: function() {
    document.getElementsByTagName("body")[0].className="add_bg"; 
}
2018年9月1日 10:56