루트에 근거한 조건부 상태

루트에 근거한 조건부 상태

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)
    }
}

이것은 하나의 큰 문제에서 예상대로 동작합니다.랜딩 페이지를 갱신하면 mounted()가 호출될 때까지 잠시 동안 네비게이션바가 표시됩니다.

네비게이션 바가 잠깐 나타나지 않도록 숨길 수 있는 방법이 있나요?디폴트(채무불이행)할 수 있다는 걸 깨달았어요showNav로.false그리고 나서 전화한다.this.$store.commit('toggleNav', true)모든 페이지에 게재되어 있지만, 그것은 다루기 어려워 보인다.

편집: 네비게이션 바 자체는 자체 컴포넌트입니다.

EDIT 2: 네비게이션 바를 동적으로 표시할 수 있어야 한다는 내용을 추가하는 것을 잊었습니다.scrollY특정 값을 초과한 경우 다시 숨깁니다.scrollY이 값보다 작은 값이 반환됩니다.이에 대해 명확하게 답변하지 못한 모든 분들께 사과드립니다.

Nuxt에서는 레이아웃 또는 페이지에 부가된 미들웨어는 로드 시 및 경로 변경 시마다 실행됩니다.

따라서 가장 간단한 방법은 미들웨어를 사용하여 현재 경로를 확인하고 탐색을 전환하는 것입니다.

/* 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>

이는 스테이트 변환에 의존하는 것이 아니라 루트를 정의할 때 필드를 포함하여 디자인 타임 중에 실행하는 것이 가장 좋습니다.뭐랄까meta.showNavBar. 예:

routes.displaces

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')
  },

  {
    // ...
  }
]

일부 컴포넌트표시하다

<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>

언급URL : https://stackoverflow.com/questions/57879848/conditional-state-based-on-the-route