在vue3中使用组合式api实现页面跳转的数据传输

在Vue 3中，组合式API（Composition API）提供了一种新的方式来组织组件内部的状态管理。如果你需要在页面跳转时传递数据，你可以这样做：

1. **创建响应式的data部分**：首先，在`setup()`函数中创建你需要传递的数据变量，例如`selectedItem`。

import { ref } from 'vue';
const selectedItem = ref(null);

2. **使用beforeRouteUpdate钩子**：当当前路由改变时，可以在`beforeRouteUpdate`中更新数据。这是因为在组件实例已经创建并复用的情况下，我们需要在这个阶段处理数据的变化。

setup() {
  // ...

  onBeforeRouteUpdate(to, from, next) {
    if (from.fullPath !== to.fullPath) {
      // 这里获取新路由传入的数据，然后设置到selectedItem
      const newData = getNewDataFromRoute(to); // 假设这是一个获取数据的方法
      selectedItem.value = newData;
    }
    next();
  }

  // ...
}

3. **使用props传递到其他组件**：如果要将数据传给另一个组件，可以使用`props`，在需要接收数据的那个组件上接受它。

<ChildComponent :selectedItem="selectedItem" />

4. **在目标组件中接收并处理数据**：在`ChildComponent`内，通过`v-model`或者其他方式绑定到props，处理数据。

<template>
  <div>{{ selectedItem?.someProperty }}</div> <!-- 使用?.运算符避免null安全问题 -->
</template>

<script>
export default {
  props: ['selectedItem'],
};
</script>