如何使用Vue路由器将数据传递到另一个组件？

<template>
  <div>
    <button @click="navigateToTargetComponent">跳转到目标组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToTargetComponent() {
      const data = '要传递的数据';
      this.$router.push({
        name: 'target',
        params: {
          data: data
        }
      });
    }
  }
}
</script>

<template>
  <div>
    <h2>目标组件</h2>
    <p>{{ receivedData }}</p>
  </div>
</template>

<script>
export default {
  props: ['receivedData'],
  mounted() {
    console.log(this.receivedData);
  }
}
</script>

import Vue from 'vue';
import VueRouter from 'vue-router';
import TargetComponent from './components/TargetComponent.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/target',
    name: 'target',
    component: TargetComponent
  }
];

const router = new VueRouter({
  routes
});

export default router;