[vue.js] 특정 컴포넌트 안보이게 처리

개발 중에 footer navigator를 특정 페이지에는 안보이게 처리를 해야하는 일이 생겼다.

우선 개발했을때 아래와 같이 2가지 방법 밖에 생각이 안났다.

1. 각각의 페이지에서 footer navigator bar를 import해서 불러오는 방법

2. 최상위 app.vue 파일에 footer navigator bar를 import해서 사용하는 방법

따라서, 2번 사항으로 개발을 진행했고, beforeUpdate 함수에서 

document.location.pathname 를 이용하여 해당페이지에 접근하면 안보이게 처리했었다. 아래와 같이..

//App.vue

beforeUpdate(): void {
   switch(document.location.pathname){
     case '/email-check':
       this.isChecked = true;
       break;
 }      

페이지 양이 많아질 수록 새로 고침할때 랜더링 되면서 footer navigator bar가 잠깐 보이다가 사라지는 현상이 있었다.

위 사항을 대체하기 위해 웹팩에서 애초에 분기해서 들어가는 방법과, 중첩라우터 index를 이용한 분기 방법이 있다.

중첩 라우터 index을 이용한 분기방법을 사용해서 처리했다.

각 페이지 => Index.vue or Index2.vue => App.vue 

위와 같은 구조로 작성했다.

view폴더 밑에 네비게이터 바가 없는 index를 하나 만들고, 있는 것을 하나 만든다.

//Index.vue (네비게이터 바 있음)

<template>
  <div>
    <router-view></router-view>
    <footer-navigation-bar></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 Index extends Vue {
  
}
</script>

//Index2.vue (네이게이션 바 없음)

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import {Component, Vue } from 'vue-property-decorator';

@Component
export default class Index2 extends Vue {

}
</script>

라우터 처리 하는부분에서 네이게이션 바 보여줄 부분은 Index.vue, 안보여줄 부분은 Index2.vue로 지정해준다.

//routes/index.ts

const routes = [
{
    path: '/',
    name: '',
    component: () => import(/* webpackChunkName: "" */ '../components/views/Index.vue'),
    children: [
      {
      path: '/',
      name: 'main',
      component: () => import(/* webpackChunkName: "main" */ '../components/views/main/MainView.vue'),
      }
    ]
  },

위 코드에서 기본 주소는 네비게이션 바가 보여져야 하므로, 아래와 같이 Index로 할당하면 된다.

 component: () => import(/* webpackChunkName: "" */ '../components/views/Index.vue'),

네이게이션 바를 감출 페이지는 아래와 같이 라우터 주소를 바꿔주면 된다.

 {
    path: '/login',
    name: '',
    component: () => import(/* webpackChunkName: "" */ '../components/views/NoneFooterIndex.vue'),
    children: [
      {
        path: '/',
        name: 'login',
        component: () => import(/* webpackChunkName: "login_view" */ '../components/views/login/LoginView.vue'),
      },

component: () => import(/* webpackChunkName: "" */ '../components/views/NoneFooterIndex.vue'),

이런 식으로 매핑만 해주고, App.vue에는 <router-view></router-view>만 남겨주고, 기존에

<footer-navigation-bar></footer-navigation-bar>는 지워준다.

네비게이션 바

 

네비게이션 바 없음