VueJs - Как скрыть глобальный компонент (например, navbar) на некоторых маршрутах? - PullRequest
Новая
       9

VueJs - Как скрыть глобальный компонент (например, navbar) на некоторых маршрутах?

0 голосов
/ 30 октября 2019

Таким образом, подавляющее большинство просмотров моего vuejs SPA имеет компонент navbar вверху. Однако некоторые избранные представления, такие как имя входа, не должны отображать это.

Мой обходной путь состоял в том, чтобы импортировать панель навигации и добавлять к каждому представлению отдельно, если это было необходимо, но теперь я вижу, что при переходе от одного представления к другому возникает странное мерцание - возможно, потому, что компонент navbar удаляетсяи сразу же повторно добавлен. Это кажется неправильным.

Я предполагаю, что есть какой-то способ добавить компонент navbar в App.vue, но условно скрыть его на некоторых маршрутах с помощью vue-router? Какая лучшая практика для этого?

Ответы [ 2 ]

3 голосов
/ 30 октября 2019

Обычный способ - использовать вложенные маршруты. Вот пример из одного из моих проектов: 

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>

Затем AdminHomeView будет введен во вложенный вид маршрутизатора в представлении оболочки администратора.

0 голосов
/ 30 октября 2019

Я предпочитаю условно визуализируемый компонент в главном представлении, чем метод вложенных маршрутов @Edins.

Vue предоставляет большое глобальное хранилище состояний через Vuex, что также делает это невероятно простым.

Классическим примером будет наличие панели навигации только при входе пользователя в систему.
Таким образом, вы отслеживаете состояние входа в систему в хранилище состояний, а затем используете вычисляемый метод получения в главном представлении (или App.vue): 

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

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