在vue3中，比如说我不知道上一个页面跳转到我这个页面的路由，此时还有没有什么方法实现点击返回上个页面？

1. 使用 router.go(-1)

这是最简单的方法，它会返回浏览历史中的上一页：

import { useRouter } from 'vue-router';

const router = useRouter();

const goBack = () => {
  router.go(-1); // 返回上一页
};

2. 使用 window.history

如果不想使用 Vue Router，可以直接使用浏览器原生的 history API：

const goBack = () => {
  window.history.back(); // 等同于 router.go(-1)
};

3. 使用 document.referrer（不推荐）

这个方法可以获取上一个页面的 URL，但有一些限制：

• 只在通过链接跳转时有效
• 受浏览器安全策略限制
• 不能用于单页应用内部的导航

const goBack = () => {
  if (document.referrer) {
    window.location.href = document.referrer;
  } else {
    // 备选方案
    router.go(-1);
  }
};

4. 使用 Vue Router 的导航守卫记录路由

如果你需要更精确的控制，可以在全局前置守卫中记录导航历史：

// 在 router/index.js 中
const router = createRouter({ /* ... */ });

const navigationHistory = [];
router.beforeEach((to, from) => {
  if (from.path !== '/') { // 避免记录空路径
    navigationHistory.push(from.path);
  }
});

export { router, navigationHistory };

然后在组件中使用：

import { navigationHistory } from '@/router';

const goBack = () => {
  if (navigationHistory.length > 0) {
    router.push(navigationHistory.pop());
  } else {
    router.go(-1);
  }
};

5. 最佳实践（推荐）

结合 Vue Router 的 go(-1) 并提供备选方案：

<template>
  <button @click="goBack">返回</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goBack = () => {
  // 尝试返回上一页
  if (window.history.length > 1) {
    router.go(-1);
  } else {
    // 如果没有历史记录，则跳转到首页或其他默认页面
    router.push('/');
  }
};
</script>

注意事项

1. router.go(-1) 和 window.history.back() 的行为完全一致
2. 在单页应用(SPA)中，这些方法只会影响客户端路由，不会导致页面刷新
3. 如果用户直接访问了当前页面（没有前驱页面），go(-1) 可能不会有任何效果
4. 移动端某些特殊场景下（如微信浏览器），可能需要特殊处理

选择哪种方法取决于你的具体需求，对于大多数情况，简单的 router.go(-1) 就足够了。