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

Question

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

重现： codePen

滚动到第 1 页底部，然后向上滚动（转换底部导航）
导航至第 2 页（汉堡包按钮）
导航移出屏幕

<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
    }

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

Vuetify bottom navigation inaccessible after scrolling then changing route

vue-router

vuejs2

vuetify.js