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>

基于路线的条件状态

2 个答案:

routes.js

SomeComponent.vue