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

Question

我试图隐藏主应用程序导航栏,基于路径是否在给定路径上.

在我的App.vue组件中,在created()方法中.我确实检查路线是否为x || y,如果其中任何一个为真,我将我的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

这可能无法正常工作,因为创建仅在创建实例后调用一次.但是,当线路的变化,也不会被调用,所以不会触发您期望触发路由变化的突变,而不是这一点,你可以把手表上的路线,所以在每条路线的变化,你可以检查是否显示您的导航栏与否,如下;

工作小提琴: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');
    }
  }
},