Vuetify——使用v-navigation-drawer组件

最新推荐文章于 2025-09-12 18:18:05 发布

原创

最新推荐文章于 2025-09-12 18:18:05 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了如何在Vue应用中使用v-navigation-drawer组件构建用户导航菜单，包括无路由和有路由情况下的配置，并展示了登录状态下的个性化选项和权限控制。

v-navigation-drawer 是您的用户用于导航应用程序的组件。导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。为了显示的目的，一些示例被包装在 v-card 元素中。在您的应用程序中，通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。

<template>
  <v-app id="app">
    <v-app-bar
      app
      elevation="1"
      light
      clipped-right
      class="v-bar--underline"
    >
      <v-app-bar-nav-icon
        v-if="!drawer"
        @click="drawer = !drawer"
      ></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <div class="text-center">
        <v