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>

现在我使用此图标打开/关闭工具栏中的抽屉：

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

并在脚本标记

中

data () {
   return {
     drawer: false
   }
}

我想在组件作为单页应用程序加载时保持抽屉关闭。它在初始启动时工作正常，“抽屉”值为false。但是当装载子组件时，抽屉也会打开。当子组件通过路由器视图加载时，如何防止此抽屉自动打开？

Answer 1

将disable-route-watcher道具添加到<v-navigation-drawer>

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

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

导航抽屉在VueJS中行为不端

1 个答案: