add a new meta (hideHeader) to decide whether render header in a component

FrontendFolder/switch-room/src/App.vue

@@ -3,7 +3,7 @@ import AppFooter from "@/components/AppFooter.vue";
 import AppHeader from "@/components/AppHeader.vue";
 </script>
 <template>
-  <app-header></app-header>
+  <app-header v-if="!$route.meta.hideHeader"></app-header>
   <router-view></router-view>
   <app-footer></app-footer>
 </template>

FrontendFolder/switch-room/src/router/index.ts

@@ -9,17 +9,24 @@ const routes: Array<RouteRecordRaw> = [
     path: "/",
     name: "home",
     component: HomeView,
+    meta: {
+      hideHeader: true,
+    },
   },
   {
     path: "/register",
     name: "register",
     component: RegisterView,
+    meta: {
+      hideHeader: true,
+    },
   },
   {
     path: "/resetPassword",
     name: "resetPassword",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
+      hideHeader: false,
     },
     component: ResetPasswordView,
   },
@@ -27,7 +34,8 @@ const routes: Array<RouteRecordRaw> = [
     path: "/offer-page",
     name: "OfferPage",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
+      hideHeader: false,
     },
     component: () =>
       import(/* webpackChunkName:  "about" */ "../views/OfferView.vue"),
@@ -36,7 +44,8 @@ const routes: Array<RouteRecordRaw> = [
     path: "/wishlist-page",
     name: "WishlistPage",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
+      hideHeader: false,
     },
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/WishlistView.vue"),
@@ -47,6 +56,10 @@ const routes: Array<RouteRecordRaw> = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
+    meta: {
+      requiresAuth: true,
+      hideHeader: false,
+    },
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/FlightView.vue"),
   },
@@ -54,7 +67,8 @@ const routes: Array<RouteRecordRaw> = [
     path: "/profile",
     name: "profile",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
+      hideHeader: false,
     },
     component: ProfileView,
   },
@@ -62,7 +76,8 @@ const routes: Array<RouteRecordRaw> = [
     path: "/login-main-page",
     name: "LoginMainPage",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
+      hideHeader: false,
     },
     component: () =>
       import("../views/LoginMainPageView.vue"),