settimeout - Vue Router 在 mounted 中无用户交互 执行 router.push 的无法回退当前页面？

Question

大佬们求助 vue-router在mounted中，没有用户交互情况下，执行router.push ，无法返回当前页面，没有当前页面的历史记录，用户点击跳转就可以

 mounted(){    setTimeout(()=>{      this.$router.push('/my')    },2000)  },

Answer 1

我这边是可以的返回的，你得提供一下你的业务代码之类，看看是不是有业务代码影响到了。
比如说在路由守卫中做了处理，重定向到了其他页面，比如说首页，所以你返回的时候会觉得没有效果，但其实是有的。

Answer 2

我搞了个 demo，无法复现。看控制台的 history 也是正常的。

https://jsfiddle.net/lilnong1/zwhb79vL/6/

Answer 3

您的问题描述是关于 Vue Router 在 Vue 组件的 mounted 钩子中执行路由跳转，然后无法返回当前页面。

首先，我们需要理解 Vue Router 的工作原理。在 Vue Router 中，当你执行 router.push 或者 router.replace 时，新的路由被添加到历史堆栈中。然后，如果用户点击浏览器的后退按钮，Vue Router 会试图重新进入堆栈中的上一个路由。

然而，你的问题是在 mounted 钩子中执行路由跳转，这可能不会保留当前页面的历史记录。这是因为 mounted 钩子在组件被挂载到 DOM 后立即执行，而此时可能还没有完全创建路由的历史记录。

解决这个问题的一种方法是使用 nextTick 函数来确保在 DOM 更新后执行路由跳转。nextTick 函数可以让你延迟执行代码，直到 Vue 完成下一个 DOM 更新周期。

以下是一个可能的解决方案：

export default {  mounted() {    this.$nextTick(() => {      this.$router.push('/my')    })  }}

在这个例子中，我们使用 this.$nextTick 来确保在 DOM 更新后执行路由跳转。这样，当前页面的历史记录应该会被正确地保留下来，用户应该能够通过点击浏览器的后退按钮返回到当前页面。

然而，请注意，如果你的应用在某些情况下不允许用户回退（例如，在用户完成某些操作后），你可能需要在应用级别处理这种情况，而不仅仅是使用 nextTick。在这种情况下，你可能需要在应用级别禁用浏览器的回退按钮或者在路由变化时清空历史堆栈。