[vue.js] global 컴포넌트 특정 라우트 컴포넌트에서 안보이게 처리

메인화면

위와 같이 통상 하단부 네이게이션 바를 특정 컴포넌트에서 안보이게 하고 싶을 때 처리하는 방법.

글로벌로 보이게 처리하려면 app.vue에서 등록을 해주면 어떤 라우터를 타고 들어가든 해당 컴포넌트를 볼 수 가 있다.

특정 컴포넌트에서 안보이게 처리는 어떻게 할까?

//app.vue

<template>
  <div id="app">
    <router-view></router-view>
    <footer-navigation-bar v-if="!isChecked"></footer-navigation-bar>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import FooterNavigationBar from '@/components/shared/FooterNavigationBar.vue';

@Component({
  components: {
    FooterNavigationBar,
  }
})

export default class App extends Vue {

  isChecked: boolean = false;

  created(){
    if(document.location.pathname === '/email-check'){
      this.isChecked = true;
    }
  }
}
</script>

App.vue 컴포넌트에서 특정 url일때, 해당 컴포넌트를 안보여주면 된다.

위 소스 코드 처럼, 라이프싸이클 부분에서 url을 파싱하여, 해당 url일때 v-if를 통한 분기처리를 해주면 해결된다.

이메일 확인화면