Vue Router返回按钮阻止跳转至外部域名的实现与最佳实践咨询

你提到的vue-router-back-button包方案是可行的，它本质是帮你追踪应用内的路由访问栈，判断上一步是否属于当前应用路由，从而避免点击返回时跳去外部域名。

1. 不需要依赖第三方包，直接用vue-router就能实现相同功能 #

有两种靠谱的实现方式：

• 手动维护路由历史栈：在全局路由守卫（比如beforeEach）里，将每次进入的有效路由存入一个数组（注意处理重复跳转的情况，比如连续点击同一路由时不重复添加）。点击返回按钮时，先检查这个数组的长度：如果数组长度≥2，就用router.push(路由栈[路由栈.length-2])跳转到上一个应用内路由；如果只有1条记录，就跳转到首页或你指定的默认页面，代替router.go(-1)。
• 利用路由匹配判断：通过router.currentRoute.value.matched可以获取当前路由的匹配记录，结合window.history的长度辅助判断。不过这种方式不如手动维护栈直观，因为window.history会包含外部域名的记录。

2. 阻止返回至外部域名是否属于最佳实践？ #

得分场景判断：

• 合理场景：如果页面是需要用户在应用内完成流程（比如表单填写、订单确认、多步骤操作页），阻止跳去外部域名能避免用户误操作丢失当前进度，提升体验。
• 不建议场景：如果是普通内容展示页，用户从外部链接进来后想返回原页面，强行阻止会违背用户的操作预期，反而降低体验。这种情况可以做个二次确认提示，让用户自主选择是否离开应用。
  总的原则是：不要过度干预浏览器默认行为，只在必要的业务场景下做限制。

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