我在网页上使用 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>
在特定路由中禁用它的最佳方法是什么?
最佳答案
您可以使用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 内部的数组中,只需添加您不希望显示抽屉的路线名称列表。
关于javascript - 在特定路线上禁用 v-navigation-drawer,Vue-js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52538583/