526互联

使用router.replace解决路由跳转问题

发布时间 2023-12-15 22:17:53作者: 罗毅豪

需求：A页面跳转到B页面，B页面带参跳转到C页面，C页面点击确定带参跳转回B页面。但是C页面点击返回按钮可返回到B页面，B页面点击返回按钮可返回到A页面。

即A->B（带参）<->C（带参）

在Vue3中，如果全部使用router.push带参跳转，则返回时路由跳转会变得很混乱。

解决方法：B和C页面的相互跳转全部使用router.replace，即在路由跳转栈中把栈顶元素换成新的页面元素。

示例代码为：

if (route.query.mode === 'viewerUser') {
  router.replace({
    path: '/viewerUserList',
    query: {
      mode: 'addOrganization'
    }
  });
  return;
}

即可。