Vue.js - router-view(특정 Component 만 출력)

특정 컴포넌트 비활성화 방법

 

1. router /index.js 에서 등록한 라우터 

// 메인 페이지 라우터
  {
    path: '/main',
    name: 'main',
    component: Main,

    beforeEnter: (to, from, next) => {
      if (!localStorage.getItem('memId')) {
        next('')
      }
      next()
    }
  },

 

 

해당 라우트 name 값이  " main " 인 라우터만 제외하고  TopMenu Component가 나타난다.

template>
  <div>
   
    <TopMenu v-if="$route.name !== 'main'"></TopMenu>
    <router-view />
  </div>
</template>
<script>
import TopMenu from './components/TopMenu.vue'

export default {
  name: 'app',
  components: {
    
    // 가져온 component 들을 등록합니다.
    TopMenu
  }
}
</script>

 

 

1. router /index.js 에서 등록한 특정 라우터만 출력

<template>
  <div>
    <TopMenu v-if="visiableRouter.includes($route.name)"></TopMenu>
   
    <router-view />
  </div>
</template>
<script>
import TopMenu from './components/TopMenu.vue'

export default {
  data: () => ({
    visiableRouter: ['main']
  }),
  name: 'app',
  components: {

    // 가져온 component 들을 등록합니다.
    TopMenu
  }
}
</script>

 

라우터 name 값이  main에 포함된 경우에만 TopMenu Component가 나타난다. 

visiableRouter: ['main'] <-- 여기에 활성화할 라우터를 등록한다.