Vuetify底部导航硬刷新后路由切换未清除激活状态问题排查

• 该问题是Vuetify v-bottom-navigation 组件内部激活状态初始化不同步导致的：硬刷新页面时组件会缓存初始匹配的路由激活状态，后续跳转到非底部导航定义的路由时，未触发内部状态的重置逻辑，因此原激活状态会残留。
• 你测试加exact属性无效的原因是问题并不出在路由匹配规则层面，属于组件内部状态和路由状态没有正确联动。
• 窗口宽度变化后状态恢复正常，是因为断点触发组件销毁重建，内部状态重新和当前路由做了匹配，因此激活状态恢复正常。

推荐手动绑定组件激活值，用路由状态主动控制激活逻辑，避免依赖组件内部的隐式匹配：

1. 给v-bottom-navigation添加value属性绑定激活值，同时给每个导航按钮添加value属性对应路由路径

<v-bottom-navigation
  v-else
  background-color="overlay"
  grow
  app
  color="primary"
  :value="activeRoute"
>
  <v-btn
    v-for="(route, key) in routes"
    ref="link"
    :key="'route' + key"
    :to="route.to"
    min-width="48"
    class="px-0"
    :value="route.to"
  >
    <span v-if="$vuetify.breakpoint.smAndUp">{{ route.name }}</span>
    <v-icon>{{ route.icon }}</v-icon>
  </v-btn>
</v-bottom-navigation>

2. 添加计算属性activeRoute，动态匹配当前路由对应的激活值：

computed: {
  activeRoute() {
    const isBottomNavRoute = this.routes.some(item => item.to === this.$route.path)
    return isBottomNavRoute ? this.$route.path : null
  }
}

这个方案可以保证路由状态和底部导航激活状态完全联动，无论是否硬刷新都不会出现状态残留问题。

内容的提问来源于stack exchange，提问作者Grant Martin