鍍金池/ 問答/HTML/ ruhe在route-view里改變父div的樣式?

ruhe在route-view里改變父div的樣式?

如題,頁面布局基本是這樣的

<div class="back">
    <header></header>
    <route-view></route-view>
</div>

現(xiàn)在我要在route-view下的一個組件里修改.back這個class,該怎么做?我試過給父div加ref,但在組件里獲取的父div的ref對應的css屬性是空。
補充:不能用vuex!

回答
編輯回答
初念

1.定義個函數(shù)改變樣式,再把這個函數(shù)傳給route-view,然后要用的頁面通過該函數(shù)改變back樣式
2.created,watch監(jiān)聽路由,當去到那個頁面的時候就改變樣式

2017年11月25日 23:28
編輯回答
你的瞳

可以在vuex里面加一個變量flag,默認為false

<div class="back" :class={'flag':$store.state.flag}>
    <header></header>
    <route-view></route-view>
</div>

然后在你需要特殊樣式的route對應的模塊內給$store.state.flag定義為true,再給這個模塊添加一個鉤beforeRouteLeave,定義全局變量$store.state.flag為false

不用vuex的話你可以試試這種方法,給你需要調整的route加一個meta: { flag: true }
然后在<div class="back"></div>對應的模塊內用watch監(jiān)聽$rout,去讀取route里面的meta對應的flag是否為true,如果為true,就可以在對應的地方添加class

2018年4月18日 19:19
編輯回答
無標題

可以通過獲取url傳遞參數(shù)
在route-view里的組件中,更改url
先設置route的參數(shù)

{
    path: '/yourroute/:flag',
    component: resolve => require(['./components/yourcomp.vue'], resolve)
},

改寫參數(shù)

this.$router.push({ path: `/yourroute/${flag}` })

然后在父組件中利用計算屬性獲取即可

test(){
    return this.$route.params.flag
}
2018年1月14日 22:49