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

这可能无法正常工作，因为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');
    }
  }
},

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

1 个答案: