Vue.js - Vue Router 특정 Component만 비활성화/ 활성화

특정 Component만 비활성화

v-if="$route.name !== '특정라우터이름'"

<template>

<Searchbar v-if="$route.name !== 'home'"></Searchbar>

라우터 이름이 home인 라우트만 제외하고 Searchbar Component가 나타남
(라우터 이름이 home인 경우는 아래 컴포넌트 부분이 생략됨)

---

2. 특정 Component만 활성화

<template>

<Searchbar v-if="visiableRouter.includes($route.name)"></Searchbar>

<script>

data: () => ({
    visiableRouter : ["Travel","Culture","Festival","Travelcourse","Leports","Accommodation","Shopping","Food"],

  }),

라우터 이름이 visiableRouter에 포함된 경우에만 Searchbar Component가 나타남

참고

https://github.com/vuejs/vue-router/issues/254

https://velog.io/@dankim/Vue-Router-%ED%8A%B9%EC%A0%95-Component%EB%A7%8C-%EB%B9%84%ED%99%9C%EC%84%B1%ED%99%94