VueJS 中的导航抽屉行为异常

Question

我正在创建一个 VueJS 单页应用程序，它在左侧有一个导航抽屉。我创建了一个包含此导航抽屉的父组件，并用于所有子组件。以下是导航抽屉的代码：

<v-navigation-drawer fixed v-model="drawer" app>
  <v-flex
    xs12
    sm6
    md8
    text-xs-center
    layout
    align-center
    justify-center
  >
  </v-flex>
</v-navigation-drawer>

现在我正在使用此图标 open/close 工具栏中的抽屉：

<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>

并在脚本标签中

data () {
   return {
     drawer: false
   }
}

我想在加载组件作为单页应用程序时保持抽屉关闭。它在 "drawer" 值为 false 的初始启动时工作正常。但是当加载子组件时，抽屉也会打开。当通过 router-view 加载子组件时，如何防止此抽屉自动打开？

Answer 1

将 disable-route-watcher 属性添加到 <v-navigation-drawer>

<v-navigation-drawer disable-route-watcher fixed v-model="drawer" app>
    ...
</v-navigation-drawer>

这会在路线更改时禁用导航抽屉的打开。参考API

VueJS 中的导航抽屉行为异常

Navigation drawer misbehaving in VueJS

vue.js

vuejs2

vuetify.js