Vant Tabbar切换时页面不刷新怎么办？

轩辕书錦提问于 2026-03-13 20:54:20 阅读 64

组件

我在用 Vant 的 Tabbar 做底部导航，点击不同 tab 时路由能跳转，但页面内容没更新，看起来像是组件被缓存了。我试过加 :key="$route.fullPath" 也没用，是不是 Tabbar 本身的问题？

这是我的 Tabbar 代码：

<van-tabbar v-model="active" active-color="#ee0a24">
  <van-tabbar-item
    v-for="item in tabs"
    :key="item.path"
    :to="item.path"
    :name="item.name"
  >
    {{ item.text }}
  </van-tabbar-item>
</van-tabbar>

Vant

我来解答赞 11 收藏

反馈

2 条解答

Mr.艳玲 Lv1

这不是 Tabbar 本身的问题，根源在 Vue Router 的组件复用机制。你 :key="$route.fullPath" 没生效大概率是加错地方了——应该加在上，不是 Tabbar 上。

正确做法：

找到你的根 App.vue 或者路由出口的地方，确保 router-view 绑定了 key：

<router-view :key="$route.fullPath" />

这样每次路由变化时，key 值不同，Vue 就会重新创建组件而不是复用。

如果你的项目用的是嵌套路由（比如 tab 页面下面还有子页面），可能需要检查一下具体是哪个层级的 router-view 没加 key。

还有个情况是，如果你用了缓存组件，那就算加 key 也不会重新创建，得在路由的 meta 信息里配置：

{

  path: '/xxx',

  component: XXX,

  meta: { keepAlive: false }

}

然后在 keep-alive 的 include/exclude 里根据 name 做排除。

你先把 router-view 的 key 加上试试，基本能解决。

2026-03-14 09:26

皇甫令敏 Lv1

这不是 Tabbar 的问题，是 Vue 组件复用机制导致的。

给 router-view 加上 key 强制刷新：

如果你的项目用了 keep-alive，需要排除对应的组件名：

你之前试的 :key="$route.fullPath" 没用，可能是写在了 Tabbar 上而不是 router-view 上，记住了要加在 router-view 那里。

2026-03-13 21:00