基于Vue中的路径路径或参数隐藏元素

Question

我试图根据路径是否在给定路径上隐藏主应用程序导航栏。

在我的App.vue组件中，在created()方法中。我检查路线是否是x || Ÿ，如果其中任何一个是真的，我将我的Vuex状态show设置为false。如果除了这两条之外还有其他路线，我会设置show = true。

然后在我的模板，我做这个

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

我注意到在Vuex工具，我的突变，甚至没有注册，所以我不知道这是为什么。他们需要做的是行动吗？这是我的完整代码。

<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'); 
    } 
    } 
},