Tab切换时如何实现前端路由不刷新页面？

Zz炳硕提问于 2026-03-16 18:53:19 阅读 59

前端

我在用 Vue 做一个带 Tab 的管理后台，点了不同 Tab 想通过前端路由切换内容，但又不想整个页面刷新。试过直接改 this.$router.push，结果页面确实没刷，但浏览器前进后退按钮失效了，而且手动输入 URL 也进不到对应 Tab。

目前 Tab 是用 v-show 控制显示隐藏的，但这样没法和路由联动。有没有办法让每个 Tab 对应一个路径，比如 /dashboard/user 和 /dashboard/order，切换时只更新内容区？

<template>
  <div>
    <nav>
      <router-link to="/user">用户</router-link>
      <router-link to="/order">订单</router-link>
    </nav>
    <router-view />
  </div>
</template>

Tab切换

我来解答赞 3 收藏

反馈

暂无解答