前言

为什么会存在这个问题？
用户可能是直接复制某个url，或者新开一个浏览器标签进入了页面。
那么此时浏览器的history记录肯定只有一条。
所以，无论是vue的this.$router.back();this.$router.go(-1)
或者是浏览器自带的 window.history.back window.history.go(-1) 都无法实现跳转。

解决方法一

所以可以通过(window.history.length来判断当前浏览器历史记录，来判定是否可以回退。

  backToHome() {
    if (window.history.length > 1) {
      window.history.back();
    } else {
      const url = 'www.baidu.com';
      window.location.href = url
    }
  }

可上面的方式有问题，如果我们多点几次回退，最终会回到这个页面，并且点击回退就失效了。

解决方法二

所以，我们需要简单优化一下

backToHome() {
    if (window.history.length > 1) {
      window.history.back();
    } else {
      const url = 'www.baidu.com';
      window.location.replace(url);
    }
  }

使用replace的方式，来替换当前url，而不是追加一个history到要回退的页面，这样用户基本只能点击一次回退，跳到要回退的页面后，就没有backToHome按钮了，浏览器历史记录始终只有一条，点击浏览器左上角的回退按键也不会生效。

即便如此可能也有问题， 每个页面都有许多链接，如果用户不是点击back，而是进入其它链接再返回时，点击back仍然无效

backToHome() {
   window.history.back();
   // 如果没有上一页，就会隔一会儿执行下面的代码，算是从侧面解决了问题
   setTimeout(() => {
   	const url = 'www.baidu.com';
    window.location.replace(url);
   },500)
}

扩展阅读

在 Web 应用程序中，如果你希望允许用户执行路由回退操作，但不确定是否有上一页可回退，你可以使用以下方法来处理这种情况：

1. 检查浏览器的历史记录:

   使用浏览器的 window.history 对象来检查是否有可回退的历史记录。window.history 提供了一些方法和属性来处理浏览器历史记录。你可以使用 window.history.length 属性来获取历史记录中的页面数量。如果 window.history.length 大于 1，则表示至少有一个页面可以回退。

   if (window.history.length > 1) {
     // 至少有一个页面可回退，可以执行路由回退操作
     window.history.back();
   }
   

2. 使用路由库的功能:

   如果你的应用程序使用了路由库（如 Vue Router、React Router、Angular Router 等），这些库通常提供了用于处理路由导航和历史记录的方法。你可以使用库的方法来执行路由回退操作，同时检查是否有上一页可回退。

   以 Vue Router 为例，你可以使用 this.$router 对象的 go 方法来执行路由回退，并在之前使用 $router.history.length 属性来检查历史记录长度。

   if (this.$router.history.length > 1) {
     // 至少有一个页面可回退，执行路由回退
     this.$router.go(-1);
   }
   

无论你选择哪种方法，都需要小心处理路由回退，以确保用户体验流畅，并考虑不同浏览器和路由库的兼容性。通常，用户应该能够通过浏览器的后退按钮或应用程序的 UI 元素执行路由回退操作。