Vue内のルートパスまたはパラメータに基づく要素を隠す

Question

ルートが指定されたパスにあるかどうかに基づいて、メインのアプリケーションナビゲーションバーを非表示にしようとしています。

私のApp.vueコンポーネントでは、created()メソッドです。私はルートがxであるかどうかを調べる|| yのいずれかが真である場合、私はshowのVuex状態をfalseに設定します。それ以外のルートであればshow = trueと設定します。

はその後、私のテンプレートで、私は私の変異がさえつまり、なぜ私はよく分からないので、登録されていないVuexツールに気づいこの

<template> 
    <div id="app"> 
     <navigation v-show="show"></navigation> 
     <router-view></router-view> 
    </div> 
</template> 

を行います。彼らは代わりに行動する必要がありますか？ここに私のフルコードです。

<template> 
    <div id="app"> 
     <navigation v-show="show"></navigation> 
     <router-view></router-view> 
    </div> 
</template> 

<script> 
import Navigation from './components/Navigation/Navigation' 
import { firebaseAuth } from './firebase/constants' 
import store from './store/index' 

export default { 
    name: 'app', 
    components: { 
    Navigation 
    }, 
    computed: { 
    show() { 
     return store.state.navigation.show 
    } 
    }, 
    created() { 

    // Checks for a user and dispatches an action changing isAuthed state to true. 

    firebaseAuth.onAuthStateChanged(user => { 
     console.log(store.state.authentication); 
     console.log(user); 
     store.dispatch('checkUser', user); 
    }); 

    // Check if given route is true, if it is then hide Nav. 

    if (this.$route.path === "/dashboard/products" || this.$route.path === "/dashboard/settings") { 
     store.commit('hideNav'); 
     } else if (this.$route.path !== "/dashboard/products" || this.$route.path !== "/dashboard/settings") { 
     store.commit('showNav'); 
    } 

    } 
}; 

</script> 

Answer 1

createdがインスタンスの作成後に一度だけ呼び出されるため、これは機能しない可能性があります。経路が変更されたときには呼び出されないので、経路変更でトリガする予定の突然変異をトリガするのではなく、watchを経路上に置くことができます。したがって、各経路の変更時に、ナビゲーションバーかどうかは、次のようにします。

の作業フィドル：http://jsfiddle.net/ofr8d85p/

watch: { 
    $route: function() { 
    // Check if given route is true, if it is then hide Nav. 
    if (this.$route.path === "/user/foo/posts") { 
     store.commit('SHOWNAV'); 
     } else { 
     store.commit('HIDENAV'); 
    } 
    } 
},