基于路由的条件状态

Question

我有一个 Vuex 状态属性，它存储一个布尔值，我用它来确定是显示还是隐藏导航栏。对于除登录页面之外的所有页面，导航栏都应该出现，因此我将默认值设置为 true。

export const state = () => ({
    showNav: true
})

然后我有一个用于切换的突变。

export const mutations = {
    toggleNav (state, show) {
        state.showNav = show
    }
}

在我的登录页面中，我致电toggleNav 以关闭导航栏。

export default {
    mounted () {
        this.$store.commit('toggleNav', false)
    }
}

这符合预期，但有一个大问题；当我刷新登录页面时，我会看到导航栏一小会儿，直到 mount() 被调用。

有什么方法可以隐藏导航栏，使其不会短暂出现吗？我意识到我可以默认 showNav 为 false，然后在每个页面上调用 this.$store.commit('toggleNav', true)，但这似乎很笨拙。

编辑：导航栏本身就是它自己的组件。

编辑2：我忘了补充一点，我需要能够在scrollY 超过某个值时动态显示导航栏，然后在scrollY 返回低于该值时再次隐藏它。我向所有回答的人道歉，因为没有更清楚地说明这一点。

Answer 1

在 Nuxt 中，附加到布局或页面的中间件运行 on load and on every route change。

所以最直接的方法是使用中间件来检查当前路径并切换您的导航：

/* store/index.js */
export const store = () => ({
  showNav: true
});

export const mutations = {
  toggleNav(state, bool){
    state.showNav = bool;
  }
}


/* middleware/toggleNavMiddleware.js */
export default function(context){
  const { route, store } = context;
  store.commit('toggleNav', route.path === /* your landing page path */);
}


/* layouts/default.vue (assuming this is the target) */
/* you can also use it in pages/*.vue */
export default {
  middleware: ['toggleNavMiddleware'],
}


/* components/NavBar.vue */
<template>
  <nav v-if="$store.state.showNav">
    <!-- content here -->
  </nav>
</template>

Answer 2

与其依赖状态突变，最好在设计时通过在定义路由时包含meta 字段来完成。像meta.showNavBar 这样的东西。例如：

routes.js

export default [
  {
    // The landing page
    path: '/welcome',
    name: 'Welcome',
    meta: {
      showNavbar: false
    },
    component: () => import('@/views/Welcome')
  },

  {
    path: '/',
    name: 'Homepage',
    meta: {
      // Don't worry about this since we'll take care of it with a computed property.
      // showNavbar: true
    },
    component: () => import('@/views/Home')
  },

  {
    // ...
  }
]

SomeComponent.vue

<template>
  <navbar v-if="showNavbar"></navbar>
</template>

<script>
  export default {
    computed: {
      showNavbar() {
        const { showNavbar } = this.$route.meta;

        return showNavbar || typeof showNavbar === 'undefined';
      }
    }
  }
</script>

或者，您可以将其命名为meta.hideNavbar，将其设置为true 用于登录页面，并使用双重否定运算符 (!!) 将其值强制为布尔值，否则默认为 false设置或离开undefined，从这里，你可以简单地做：

<navbar v-if="!!$route.meta.hideNavbar"></navbar>