使用 Vue3 Composition API 和 vue-router .replace 函数将参数从组件传递到另一个组件

Question

使用 Option API，我能够做到这一点：

在组件A中：

this.$router.replace({ name: 'ComponentB', params:{data: myObject} });

在组件B中：

console.log(this.$route.params); // this outputs myObject

使用组合 API，这就是我所做的：

在组件A中：

import { useRouter } from 'vue-router';
const router= useRouter();
router.replace({ name: 'ComponentB', params:{data: myObject}  });

在组件B中：

import { useRoute } from 'vue-router';
const route= useRoute();
console.log(route.params); // here i get empty object in the console {}

显然它不起作用，但我找不到我丢失的东西。

Answer 1

在您的路由器设置中，确保您已使用参数定义“ComponentB”：

const routes = [
  {
    path: '/componentA',
    name: 'ComponentA',
    component: ComponentA,
  },
  {
    path: '/componentB/:data',
    name: 'ComponentB',
    component: ComponentB,
  },
  //write your other routes here
];
export default router;