滚动然后更改路线后无法访问Vuetify底部导航

Question

我在更改路线时遇到了v-bottom-navigation hide-on-scroll 的问题。如果我在一条具有可滚动内容的路线上，然后向下滚动然后向上滚动，它会按预期工作 - 底部导航是隐藏的。然后，在路由更改到没有可滚动内容的页面时，底部导航无法访问。没有明显的方法可以重置hide-on-scroll 设置的tranform 样式，除了转到具有可滚动内容的页面，然后向下滚动。

复制： codePen

1. 滚动到第 1 页的底部，然后向上滚动（底部导航已过渡）
2. 导航到第 2 页（汉堡按钮）
3. 导航在屏幕外转换

<v-main>
  <v-container fluid>
    <v-fade-transition mode="out-in">
      <router-view></router-view>
    </v-fade-transition>
  </v-container>
</v-main>
<v-bottom-navigation
  hide-on-scroll
  grow
  app
>...</v-bottom-navigation>

谢谢。

Answer 1

感谢 Vuetify discord #help 频道中的 Kael 提供 solution：使用 :input-value.sync 在路线更改时打开它。

    <v-bottom-navigation
      :input-value.sync="bottomNav"
      hide-on-scroll
      grow
      app
    >

  watch: {
    '$route.path' () {
      this.bottomNav = true
    }