在特定路线上禁用 v-navigation-drawer，Vue-js答案

【问题标题】：Disabling v-navigation-drawer on specific routes, Vue-js在特定路线上禁用 v-navigation-drawer，Vue-js
【发布时间】：2019-03-03 11:06:21
【问题描述】：

我在我的网页上使用 v-navigation-drawer，但我想在特定路线上禁用它，例如在登录页面上。我目前使用的是App.vue文件中的v-navigation-drawer，如图：

  <v-app>
<v-navigation-drawer  id ="nav"
  persistent
  :mini-variant="miniVariant"
  :clipped="clipped"
  v-model="drawer"
  enable-resize-watcher
  fixed
  app
  width="275"
  mobile-break-point


>
  <v-list style="width:275px">
    <v-list-tile   style="color: white"
      value="true"
      v-for="(item,i) in items"
      :key="item.path"
      @click="redirect(item.path)"
    >
      <v-list-tile-action style="color:#1872EF" >

   <v-icon v-html="item.icon"></v-icon>
      </v-list-tile-action>

      <v-list-tile-content id="list">
        <v-list-tile-title v-text="item.title"></v-list-tile-title>
      </v-list-tile-content>

    </v-list-tile>
  </v-list>
</v-navigation-drawer>
<v-toolbar
  app
  :clipped-left="clipped" 
  style="background-color:#FFFFFF"
>
  <p style="color:#DFDEE3" > Menu </p>
  <img src="./assets/agilebot.svg" height="44" width="150">
  <v-toolbar-title id="title"></v-toolbar-title>

</v-toolbar>

在特定路线中禁用它的最佳方法是什么？

【问题讨论】：

请提供router代码和与该模板结合的模板

标签： javascript html vue.js navigation-drawer vuetify.js

【解决方案1】：

你可以使用v-if（甚至是v-show）来做到这一点

<v-navigation-drawer v-if="['home'].indexOf($route.name) === -1">

home 是您在路由器中的登录页面名称：

routes: [
    { path: '/', component: Home, name: "home" }, // names are arbitrary of course

并且在 v-if 内的数组中，只需在您不希望显示抽屉的地方添加路线名称列表。

【讨论】：