vue3 router.back()带参数

在 Vue3 中，使用 `router.back()` 返回上一个页面时不能直接带参数。但你可以在当前页面中使用 `router.push()` 传递参数，然后在上一个页面中通过 `route.query` 获取参数。

例如，在当前页面中使用以下代码跳转到上一个页面：

router.push({ path: router.history.current.fullPath, query: { param: 'value' }})

然后在上一个页面中使用以下代码获取参数：

this.$route.query.param

注意，`router.push()` 会增加一条新的历史记录，如果你希望在返回上一个页面时直接带参数，可以考虑使用 `router.replace()` 替换当前页面的历史记录。

相关问题

vue3 router.back() 携带参数

你可以使用 `router.go(-1)` 实现返回上一页，并且在路由跳转时通过 `query` 或 `params` 传递参数。例如：

// 在当前路由中跳转到下一页，并携带参数
this.$router.push({ path: '/next-page', query: { key: value } })

// 返回上一页，并携带参数
this.$router.go(-1, { query: { key: value } })

在被返回的页面中，你可以通过 `$route` 对象获取传递的参数。例如：

// 获取 query 参数
const queryParam = this.$route.query.key

// 获取 params 参数
const paramsParam = this.$route.params.key

其中，`query` 适用于传递字符串类型的参数，而 `params` 适用于传递数字或字符类型的参数。

vue3router.back()怎么传参

Vue Router 的 `back()` 方法主要用于回退上一跳历史记录，它本身并不支持直接传递参数。如果你想在回退操作中携带数据，通常是在每次导航之前或之后，在组件内部管理路由参数。

如果你使用的是 Vue Router 的路由守卫（如 beforeEach、beforeRouterUpdate 等），可以在这些钩子里处理参数传递。例如：

// router.js
import { useRoute } from 'vue-router';

const router = new VueRouter({
  //...
});

router.beforeEach((to, from, next) => {
  const paramsToBack = {
    key: to.params.key, // 或者你想传递的其他参数
  };
  
  localStorage.setItem('paramsForBack', JSON.stringify(paramsToBack)); // 存储参数

  next(); // 继续导航
});

router.afterEach(() => {
  if (location.hash === '#!back') {
    // 检查是否有 #!back 标签，如果有则回退并从本地存储取参数
    const storedParams = JSON.parse(localStorage.getItem('paramsForBack'));
    router.replace({ name: 'yourTargetRoute', params: storedParams });
  }
});

然后在需要的地方添加一个链接或按钮点击事件，通过 hash 可以触发回退，并附带参数：

<a href="#!/back?key={{ someValue }}">回退并传递参数</a>

当用户点击这个链接，会先将当前页面的参数存入本地，然后跳转到目标页面（在这里可能是 `yourTargetRoute`）并带上回退时的参数。