動態插入一個CSS類導航欄基於路線

Question

的Vue 2和Vue公司，路由器2

我試圖改變其訪問路線基於我的應用程序的導航欄的顏色。下面是我有：

main.js：

import App from "../components/App.vue"  

const app = new Vue({ 
    router: Router, 
    template: '<app></app>', 
    components: { App } 
}).$mount('#app') 

App.vue：

<template> 
    <div> 
     <div class="navbar" v-on:class="{ colorNav: 'color-nav' }"></div> 
     <router-view></router-view> 
    </div> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     colorNav: false 
     } 
    } 
    } 
</script> 

使用此設置，因爲colorNav屬性是假的，color-nav類不會被添加到導航欄。按預期工作。

現在用戶轉到/somepage，它映射到SomePage.vue，它在router-view內呈現。我希望SomePage.vue更改App.vue上的colorNav屬性，以便將color-nav類添加到導航欄中。

我該怎麼做？

Answer 1

有多種方式可以做到這一點。我自己有不同類型的標題，這取決於我所處的頁面。

一個簡單的方法可以是檢查你是哪條路線，並根據路線更改此變量。您可以將手錶放在$route上，每當它發生變化時，您可以根據當前路線決定值colorNav。代碼將是這樣的：

<script> 
    export default { 
    data() { 
     return { 
     colorNav: false 
     } 
    } 
    watch: { 
    '$route'() { 
     if (this.$route.path === '/somepage') { 
     this. colorNav = true 
     } 
     else { 
     this. colorNav = false 
     } 
    } 
    } 
} 
</script> 

另一種方式來做到這一點可以有一些centralised state或vuex店這個變量和因要求每個組件的安裝塊改變這一點。

Answer 2

您可以使用組分像後衛：

1. beforeRouteEnter（沒有訪問到VUE實例this）
2. beforeRouteUpdate（可V2.2起）
3. beforeRouteLeave

---

const Foo = { 
    template: `...`, 
    beforeRouteEnter (to, from, next) { 

    }, 
    beforeRouteUpdate (to, from, next) { 

    }, 
    beforeRouteLeave (to, from, next) { 

    } 
} 

在每種方法中，您都可以訪問to和from變量，這些變量是包含路徑的路徑對象。

因此，對於你的情況，你可以使用beforeRouteLeave，要知道to.path並相應地修改您的數據屬性，像這樣：

export default { 
    data() { 
    return { 
     colorNav: false 
    } 
    }, 
    beforeRouteLeave (to, from, next) { 
    if(to.path === '<your-route-name>') { 
     this.colorNav = 'your-choice' 
    } 
    next() // Don't forget this 
    } 
} 

如果你忘記打電話給next()你的路由器將不會繼續在路由切換。