使用 Vue 创建静态左侧导航栏组件

Question

我需要在应用程序布局的左侧放置一个垂直导航栏，并将内容全部放在右侧。

就目前情况而言，我不能这样做。我的导航栏将所有内容向下推。我怎样才能解决这个问题？

这就是我的App.vue's模板的样子：

<template>

    <div id="app">

        <v-app>

            <navbar/>

            <v-main>

                <v-container class="main-container">

                    <router-view/>

                </v-container>

            </v-main>

        </v-app>

    </div>

</template>

对于navbar我正在使用 vuetify 的组件，特别是迷你导航栏 根据示例代码，它当前的样子如下：

<template>

    <v-navigation-drawer

        v-model="drawer"

        :mini-variant.sync="mini"

        permanent

    >

        <v-list-item class="px-2">

            <v-list-item-avatar>

                <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>

            </v-list-item-avatar>

            <v-list-item-title>John Leider</v-list-item-title>

            <v-btn

                icon

                @click.stop="mini = !mini"

            >

                <v-icon>mdi-chevron-left</v-icon>

            </v-btn>

        </v-list-item>

        <v-divider></v-divider>

        <v-list dense>

            <v-list-item

                v-for="item in items"

                :key="item.title"

                link

            >

                <v-list-item-icon>

                    <v-icon>{{ item.icon }}</v-icon>

                </v-list-item-icon>

                <v-list-item-content>

                    <v-list-item-title>{{ item.title }}</v-list-item-title>

                </v-list-item-content>

            </v-list-item>

        </v-list>

    </v-navigation-drawer>

</template>

<script>

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component<Navbar>({})

export default class Navbar extends Vue {

    private value: string = 'home';

    private drawer: boolean = true;

    private items: Array<Object> = [

        { title: 'Home', icon: 'mdi-home-city' },

        { title: 'My Account', icon: 'mdi-account' },

        { title: 'Users', icon: 'mdi-account-group-outline' }

    ]

    private mini: boolean = true;

}

</script>

正如上面提到的，这仍然只是将应用程序的所有内容向下推。这是目前的样子：

我该怎么做才能使导航栏在左侧但在右侧

Answer 1

将导航栏和主要内容包装在<v-row>：<template>&nbsp; <div id="app">&nbsp; &nbsp; <v-app>&nbsp; &nbsp; &nbsp; <v-row>&nbsp; &nbsp; &nbsp; &nbsp; <navbar/>&nbsp; &nbsp; &nbsp; &nbsp; <v-main>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-container class="main-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <router-view/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-container>&nbsp; &nbsp; &nbsp; &nbsp; </v-main>&nbsp; &nbsp; &nbsp; </v-row>&nbsp; &nbsp; </v-app>&nbsp; </div></template>默认情况下，v-app有一个带有flex-direction: columnCSS 的内部包装器，这意味着它的子元素是垂直放置的。通过将这两个子元素包装在 a 中v-row，您可以将它们放置在带有 的包装元素中flex-direction: row。

Answer 2

我猜你误解了这些概念。您正在将 a 包装在组件v-navigation-drawer内navbar。在Vuetify v-navigation-drawer中，有一个用于构建侧边栏的组件，这就是您的组件处于垂直方向的原因。编辑1app您可以使用组件内的选项配置应用程序侧边栏或应用程序导航栏，如下所示：  <v-navigation-drawer    app  >  ...  </v-navigation-drawer>就像官方文档中一样。如果你这样做，该组件将正常工作，并且你的内容将不会被下推。