iframe vue router go -1无效

在Vue Router中使用 router.go(-1) 通常是用来回退到上一个页面的。如果你在 iframe 中使用 router.go(-1) 无法回退,那么可能是由于 iframe 嵌套的原因。

如果您的应用程序有多个 iframe ,而每个 iframe 又使用了相同的Vue Router实例,那么您在其中一个 iframe 中调用 router.go(-1) 将不会影响其他 iframe 中的路由堆栈。

为了解决这个问题,您可以使用Vue Router提供的 router.beforeEach 守卫,它会在每次路由导航前被调用。在守卫中,您可以通过 window.parent 访问父级窗口,并在父级窗口中执行路由导航。下面是一个示例代码:

router.beforeEach((to, from, next) => {
  if (window.parent) {
    window.parent.postMessage({type: 'navigate', path: to.path}, '*')
    next(false)
  } else {
    next()

在上述代码中,我们使用 window.parent.postMessage 将消息发送给父级窗口,并指定 * 作为目标窗口的来源。在父级窗口中,您需要监听 message 事件,以便在接收到导航消息时执行路由导航。下面是一个父级窗口中的示例代码:

window.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'navigate') {
    router.push(event.data.path)

在上述代码中,我们使用 window.addEventListener 监听 message 事件,并在接收到类型为 navigate 的消息时执行路由导航。

希望这些代码对您有所帮助。

  •