VueJS 中的导航抽屉行为异常

Posted 2023-02-23

【中文标题】VueJS 中的导航抽屉行为异常

【英文标题】：Navigation drawer misbehaving in VueJS

【发布时间】：2018-08-27 18:52:05

【问题描述】：

我正在创建一个左侧有一个导航抽屉的 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
   

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

【参考方案1】：

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

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

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