일부 경로에서 글로벌컴포넌트(예를 들어 navbar)를 숨기려면 어떻게 해야 합니까?

일부 경로에서 글로벌컴포넌트(예를 들어 navbar)를 숨기려면 어떻게 해야 합니까?

따라서 vuejs SPA 뷰의 대부분은 상단에 네비게이션 바 컴포넌트가 있습니다.단, 로그인과 같은 일부 선택 뷰에서는 이 정보가 표시되지 않습니다.

회피책으로는 필요에 따라 네비게이션 바를 Import하여 각 뷰에 개별적으로 추가하는 것이었는데, 어느 뷰에서 다른 뷰로 이동할 때 이상한 깜박임이 발생하는 것을 알 수 있었습니다.아마 네비게이션 컴포넌트를 분리한 후 바로 다시 추가할 수 있기 때문입니다.이건 잘못된 것 같아요.

App.vue에서 navbar 컴포넌트를 추가할 수 있지만 vue-router를 사용하는 일부 경로에서는 조건부로 숨길 수 있습니다.어떻게 하면 좋을까요?

일반적인 방법은 네스트된 루트를 사용하는 것입니다.다음은 제 프로젝트 중 하나의 예입니다.

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/login',
            name: 'login',
            component: LoginView,
        },
        {
            path: '/admin',
            name: 'admin',
            component: AdminShell,
            children: [
                {
                    path: 'home',
                    name: 'admin_home',
                    component: AdminHomeView
                },
            ]
        },
    ],
});

메인 뷰에는 라우터 뷰 컴포넌트만 있기 때문에 로그인 뷰 컴포넌트는 네비게이션바 없이 표시할 수 있습니다.

<!-- App -->
<v-app>
    <v-content>
        <router-view> </router-view>
    </v-content>
</v-app>

관리 셸이 메인 뷰에 삽입되고 네비게이션바, 사이드바 및 기타 필요한 것이 포함됩니다.

<!-- Admin shell -->
<v-container fill-height>
    <v-toolbar color="blue darken-3" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
        <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
            <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
            <span class="hidden-sm-and-down">Admin</span>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <UserInfo></UserInfo>
    </v-toolbar>

    <!-- Nested route -->
    <router-view></router-view>
</v-container>

다음으로 Admin Home View가 관리 셸 뷰의 중첩된 라우터 뷰에 삽입됩니다.

Route Meta Fields는 이 문제를 해결했습니다.

//router.js
{
 path: '/login',
 name: 'login',
 component: () => import(/* webpackChunkName: 'login' */ '@/components/Login.vue'),
 meta: {
  hideNavbar: true,
 }
}

//App.vue
<Navbar v-if="!$route.meta.hideNavbar" />

메인 뷰에서 조건부로 렌더링된 컴포넌트를 @Edins 중첩 경로 접근법보다 선호합니다.

Vue는 다음을 통해 글로벌 스테이트 스토어를 제공합니다.Vuex이 또한 믿을 수 없을 정도로 단순합니다.

일반적인 예로는 사용자가 로그인 할 때만 네비게이션바를 사용할 수 있습니다.
따라서 상태 저장소에서 로그인 상태를 추적한 다음 기본 보기(또는 App.vue)에서 계산된 getter를 사용합니다.

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

export default {
name: 'App',
computed: { 
  isAuthenticated() {
    return this.$store.getters.isAuthenticated
  },
},

v-if 디렉티브를 사용하여 현재 경로의 이름을 확인하여 구성 요소를 조건부로 렌더링할 수 있습니다.나는 이것을 최근 프로젝트에서 사용했다.

my route index.js 파일

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/register',
    name: 'register',
    component: Register
  }  
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

내 App.vue 파일

<template>
    <div id="app">

/* Note that this takes an array of route names, so you can simply pass in
the name of the route you don't want this component to be displayed on */

        <navbar v-if="!['login', 'register', 'help'].includes($route.name)" />
    
        <main>
            <router-view />
        </main>
    
        <appfooter v-if="!['login', 'register'].includes($route.name)"/>
    
    </div>
    </template>

router - >index . parents child in routes routes routes and and and and - 그 시점에서 글로벌컴포넌트가 있는 경우는 모두 기입하고 자녀는 표시할 장소를 기입합니다.

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    { path: "/", redirect: "/login" },
    { path: "/registration", component: registration },

    {
      path: "/home",
      component: navbar,
      children: [
        {
          path: "/home",
          name: "home",
          component: () => import("../views/Home.vue"),
        },
        {
          path: "/notes",
          name: "notes",
          component: () => import("../views/notes/Index.vue"),
        },
        {
          path: "/notes/create",
          name: "notescreate",
          component: () => import("../views/notes/Create.vue"),
        },
        {
          path: "/notes/edit/:id",
          name: "notesedit",
          component: () => import("../views/notes/Edit.vue"),
        },
        { path: "/myposts", component: myPosts },
        { path: "/allposts", component: allPosts },
        { path: "/create", component: create },
        { path: "/edit/:id", component: edit },
      ],
    },
    {
      path: "/login",
      name: "login",
      component: () => import("../views/Login.vue"),
    },
  ],
});

앱에 쓰는 것을 잊지 마세요.표시하다

router-view가 없으면 동작하지 않습니다.

오래된 건 알지만 난 다른 방법을 써.

노선명이 바뀌는 것을 봐 주세요.사용하고 싶다auth.login또는auth.register제 경로로요.

<v-app-bar v-if="!currentRouteName.startsWith('auth')"></v-app-bar>

그 후:

data() {
    return{
        currentRouteName: 'home',
    }
},
watch:{
    ['$route.name'](route) {
        this.currentRouteName = route
    }
}

사용하고 싶지 않은 사람v-if ★★★★★★★★★★★★★★★★★」v-show을 사용법
https://router.vuejs.org/guide/essentials/named-views.htmlhttpsrouter.vuejs.org/guide/essentials/.html

언급URL : https://stackoverflow.com/questions/58615754/how-to-hide-global-component-e-g-navbar-on-some-routes