Javascript v-navigation-drawer和v-app-bar don'；我不能如愿工作

我已经做了一个简单的应用程序栏和导航抽屉页面。但是我的

v-navigation-drawer

组件似乎没有放在我的

v-app-bar

组件下面。

v-app

组件上的官员明确表示不应该这样（）

我的目标是使用官方布局，因为它比我现在拥有的更漂亮。我试过在

v-app-bar

和

v-navigation-drawer

组件上使用许多道具，但我似乎无法让它工作

编辑： 我的代码作为

组件加载到我的主
App.vue

我当前的代码：

<template>
  <div>
    <v-app-bar app clipped-leftS flat dark>
      <v-toolbar-title>
        <span class="first-word font uppercase">hi</span>
        <span class="second-word font uppercase">stackoverflow</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-navigation-drawer app flat dark mini-variant permanent expand-on-hover>
      <v-list>
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/11.jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Doe</v-list-item-title>
        </v-list-item>
        <v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>{{ item.text }}</v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    navbarlist: [
      { icon: "mdi-view-dashboard", text: "Dashboard", route: "/" },
      { icon: "mdi-upload", text: "Upload", route: "/upload" },
    ],
  }),
};
</script>

<style>
.font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.uppercase {
  text-transform: uppercase;
}
.first-word {
  font-weight: 400;
}
.second-word {
  font-weight: 200;
  color: grey;
}
.item-tile-icon {
  color: black;
}
</style>


你好
栈溢出
无名氏
{{item.icon}
{{item.text}
导出默认值{
数据：（）=>({
导航栏列表：[
{图标：“mdi视图仪表板”，文本：“仪表板”，路径：“/”}，
{图标：“mdi上传”，文本：“上传”，路由：“/upload”}，
],
}),
};
.font{
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、机器人、氧气、，
Ubuntu，坎塔雷尔，“开放式Sans”，“Helvetica Neue”，无衬线；
}
.大写字母{
文本转换：大写；
}
.第一个字{
字体大小：400；
}
.第二个字{
字号：200；
颜色：灰色；
}
.项目平铺图标{
颜色：黑色；
}
我通过在我的
v-navigation-drawer
组件中添加
clipped
来修复它

因此，我的最终代码是：

<template>
  <div>
    <v-app-bar app clipped-left flat dark>
      <v-toolbar-title>
        <span class="first-word font uppercase">hi</span>
        <span class="second-word font uppercase">stackoverflow</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-navigation-drawer app clipped flat dark expand-on-hover>
      <v-list>
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/11.jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Doe</v-list-item-title>
        </v-list-item>
        <v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>{{ item.text }}</v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>


你好
栈溢出
无名氏
{{item.icon}
{{item.text}
您的导航抽屉在左侧，是否应将其向左剪裁？如果我把它夹在左边，它就会和抽屉重叠。这两者似乎根本没有“联系”（如果有道理的话）。这就是为什么我把它剪对了。好的，在我的
App.vue
中，这个组件已经包装在
v-App
组件中了。因此，我将当前代码中的
v-app
更改为
div
，现在左剪裁的
按预期工作（不重叠）。但布局仍不符合预期。（用我当前的代码编辑了原始帖子。）我得到了同样的错误，只是必须在两者上都包含“app”，而且它在这里工作很奇怪，但是你的应用程序不应该被包装在元素中吗？@JuanPabloUgas模板被包装在使用路由的v-app元素中。这是一个v-app元素的子集。