Navbar를 어떻게 페이지마다 유동적으로 보여줄 수 있을까?

 

위에 보이는 부분이 Navbar로 컴포넌트를 만들어두었다.

 

해당 Navbar는 로그인이 된 상태에서만 등장해야 하기 때문에 기존에는 App.vue에 설정을 두었다.

 

<template>
  <navbar v-if="loginState"></navbar>
  <router-view></router-view>
</template>

<script setup>
import Navbar from "./components/Navbar.vue";
import { useMainStore } from "@/store/store.js";
import { computed } from "vue";

const store = useMainStore();
const loginState = computed(() => store.loginState);
</script>

<style scoped></style>

 

store에서 로그인 상태를 추출해서 로그인이 된 상태면 navbar를 보여주기 설정했었다.

 

문제점

로그인만 성공하면 메인, 로그인페이지를 Navbar가 사라지지 않는다.

 

 

 

 

위 사진처럼 모든 화면에서 Navbar가 한번 생성되면 고정되어 따라다니는 점이 문제였다.

 

내가 하고 싶은 부분은 메인, 로그인, 에러 페이지에서는 Navbar 뜨지 않길 원한다.

 

 

변경 사항

기존에는 App.vue에서 store의 로그인 상태를 보고 Navbar의 표시 유무를 결정했다.

 

그러나 store가 아닌, 해당 라우터에 showNavbar 라는 옵션을 추가해서 판단하도록 교체했다.

 

index.js(router)

const routes = [
  {
    path: "/login",
    name: "Login",
    component: LoginView,
    meta: { showNavbar: false },
  },
  {
    path: "/register",
    name: "Register",
    component: RegisterView,
    meta: { showNavbar: false },
  },
  {
    path: "/chat",
    name: "Chat",
    component: ChatView,
    meta: { requiresAuth: true },
  },

 

그래서 Navbar가 없어도 되는 위치에만 false를 넣었다.

 

또한 App.vue에서도 더 이상 store를 기준으로 판단하는 게 아니라 meta를 통해 판단하도록 코드를 변경했다.

 

App.vue

<template>
  <navbar v-if="showNavbar"></navbar>
  <router-view></router-view>
</template>

<script setup>
import Navbar from "./components/Navbar.vue";
import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();
const showNavbar = computed(() => {
  return route.meta.showNavbar !== false;
});
</script>

<style scoped></style>

 

위 코드처럼 store에 의존하는 대신 route에 의존하도록 코드를 변경해서 Navbar 문제를 해결할 수 있었다.