は動的に私が訪問された経路に基づいて、私のアプリのナビゲーションバーの色を変更しようとしているルート

Question

ヴュー2とヴュー・ルータ2

に基づいてナビゲーションバーにするCSSクラスを挿入します。

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プロパティがfalseであることから、color-navクラスは、ナビゲーションバーに追加されませんここで私が持っているものです。意図したとおりに働く。

ユーザーが/somepageに移動し、SomePage.vueにマップされ、内部がrouter-viewにレンダリングされます。私は、color-navクラスがnavbarに追加されるようにApp.vueのcolorNavプロパティを変更するSomePage.vueを希望します。

どうすればよいですか？

Answer 1

複数の方法があります。私は自分のページに応じて異なる種類のヘッダーを持っています。

簡単な方法の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が
2. beforeRouteUpdate（以降使用可能V2.2）
3. beforeRouteLeave

（VUEインスタンスの thisにアクセスすることはできません）

---

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

    }, 
    beforeRouteUpdate (to, from, next) { 

    }, 
    beforeRouteLeave (to, from, next) { 

    } 
} 

それぞれの方法では、パスを含むルートオブジェクトであるtoとfromという変数にアクセスできます。あなたのルータが経路切り替えに進まなくなりますnext()するために呼び出すことを忘れた場合

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 
    } 
} 

：あなたは、beforeRouteLeaveを使用することができますto.pathを知っているし、それに応じてそのようなあなたのデータのプロパティを変更するあなたのケースのためにそう

。