基于路线的条件状态

我有一个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（）为止。

Is there some way to hide the nav bar such that it doesn't briefly appear? I realized I could default showNav to false and then call this.$store.commit('toggleNav', true) on every page but that seems unwieldy.

EDIT: The nav bar is itself its own component.

EDIT 2: I forgot to add that I need to be able to dynamically show the nav bar when scrollY exceeds a certain value and then hide it again when scrollY returns below that value. My apologies to everyone who answered for not being clearer about this.