vue.js - 基于路由的条件状态

Question

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

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

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

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

在我的着陆页中，我调用了 toggleNav 来关闭导航栏。

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

这按预期工作但有一个大问题；当我刷新登录页面时，我会看到导航栏一秒钟，直到调用 mounted()。

有没有什么方法可以隐藏导航栏，使其不会短暂出现？我意识到我可以将 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>