Vue3 Composition API实现返回按钮：RouterLink与router.push哪个更优？

在Vue 3 Composition API搭配Vue Router 4开发时，返回按钮选择RouterLink还是router.push，核心取决于你的需求场景，两者各有适用场景：

优先选RouterLink（最佳实践首选） #

• 这是Vue Router官方提供的声明式导航组件，专为页面跳转设计，自带原生链接的无障碍特性：支持右键新标签页打开、键盘Tab聚焦后回车触发导航，对屏幕阅读器用户更友好。
• 自动管理路由激活状态，会给当前匹配的路由自动添加router-link-active/router-link-exact-active类，方便实现导航高亮样式，无需手动编写判断逻辑。
• 代码更简洁，符合Vue的声明式编程思路，不需要额外编写点击事件回调。
• 你给出的第一个示例就是标准的正确用法，只要跳转前不需要执行额外业务逻辑，这就是最符合最佳实践的方案：

<RouterLink :to="{ name: 'clients-index' }">
  <AppButton text="Volver" icons="fa-chevron-left" />
</RouterLink>

适合用router.push的场景 #

• 当你需要在跳转前执行自定义业务逻辑时，编程式的router.push会更灵活：比如跳转前弹出确认提示、保存未提交的表单数据、完成异步接口调用后再跳转等场景，都需要先处理逻辑再触发导航。
• 举个实际例子，跳转前检查是否有未保存数据：

<AppButton text="Volver" icons="fa-chevron-left" @click="handleBack" />

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const hasUnsavedData = ref(false) // 假设这是表单是否未保存的状态

const handleBack = () => {
  if (hasUnsavedData.value) {
    if (confirm('还有未保存的内容，确定要离开吗？')) {
      router.push({ name: 'clients' })
    }
  } else {
    router.push({ name: 'clients' })
  }
}
</script>

额外提示 #

如果你的“返回按钮”需求是回到浏览器历史的上一页（而非固定跳转到某个指定路由），更推荐使用router.go(-1)，这种方式能适配任意来源页面的返回，比固定跳转更灵活。

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