如何隐藏某些路线上的全局组件(例如导航栏)？ [英] How to hide global component (e.g navbar) on some routes?

问题描述

因此，我的vuejs SPA上的绝大多数视图在顶部都有一个导航栏组件。但是，某些选择的视图(如登录)不应显示此内容。

我的解决方法是导入导航栏并在需要时单独添加到每个视图，但现在我可以看到，在从一个视图切换到另一个视图时，导航栏会导致奇怪的闪烁--可能是因为导航栏组件正在被删除，然后立即重新添加。这似乎是不对的。

我假设有某种方法可以在App.vue中添加导航条组件，但有条件地使用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>

然后，AdminHomeView将被注入到管理外壳视图的嵌套路由器视图中。

这篇关于如何隐藏某些路线上的全局组件(例如导航栏)？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！