如何在路由跳转至其他组件时传递选中卡片的特定数据

嘿，我来帮你搞定路由跳转时传递选中卡片数据的问题～ 下面分React和Vue这两种主流框架的场景，给你详细说具体的实现方式：

方式1：通过路由参数传递（适合简单数据，如ID） #

如果你的卡片数据有唯一标识（比如id），可以把它拼在路由路径里传递，这种方式的好处是刷新页面后数据不会丢失：

import { useNavigate } from 'react-router-dom';

// 卡片组件
const Card = ({ data }) => {
  const navigate = useNavigate();
  
  const handleCardClick = () => {
    // 把卡片ID作为路由参数拼到路径中
    navigate(`/card-detail/${data.id}`);
  };

  return <div onClick={handleCardClick} className="card">{data.title}</div>;
};

然后在目标详情组件里，通过useParams获取这个ID，再根据ID去获取完整的卡片数据（可以从状态管理工具或者API接口拉取）：

import { useParams } from 'react-router-dom';

// 详情组件
const CardDetail = () => {
  const { id } = useParams();
  // 这里可以根据id请求数据或者从全局状态中获取
  const cardData = fetchCardDataById(id);

  return (
    <div className="detail">
      <h2>{cardData?.title}</h2>
      <p>{cardData?.content}</p>
    </div>
  );
};

方式2：通过路由state传递（适合复杂对象数据） #

如果想直接传递整个卡片对象，可以用路由的state属性，这种方式数据不会显示在URL里，但要注意刷新页面后state里的数据会丢失：

// 卡片组件中跳转
const handleCardClick = () => {
  navigate('/card-detail', { 
    state: { selectedCard: data } 
  });
};

在详情组件里通过useLocation获取state中的数据：

import { useLocation } from 'react-router-dom';

const CardDetail = () => {
  const location = useLocation();
  // 可选链操作符避免state不存在时报错
  const selectedCard = location.state?.selectedCard;

  if (!selectedCard) {
    return <div>未获取到卡片数据</div>;
  }

  return (
    <div className="detail">
      <h2>{selectedCard.title}</h2>
      <p>{selectedCard.content}</p>
    </div>
  );
};

方式1：路由参数传递（简单数据） #

和React类似，先把卡片ID拼到路由路径中：

<template>
  <div @click="handleCardClick(data)" class="card">{{ data.title }}</div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const handleCardClick = (data) => {
  router.push({ path: `/card-detail/${data.id}` });
};
</script>

在详情组件里通过useRoute获取参数：

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const cardId = route.params.id;

// 根据ID获取完整卡片数据
const cardData = await fetchCardDataById(cardId);
</script>

方式2：通过路由props传递复杂数据（Vue Router 4+） #

如果要传递整个卡片对象，可以在路由配置中开启props，然后通过params传递：
首先配置路由：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import CardDetail from '../views/CardDetail.vue';

const routes = [
  {
    path: '/card-detail',
    name: 'CardDetail',
    component: CardDetail,
    props: true // 开启props传递
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

然后在卡片组件中跳转：

const handleCardClick = (data) => {
  router.push({ 
    name: 'CardDetail', 
    params: { selectedCard: data } 
  });
};

最后在详情组件中通过props接收：

<script setup>
const props = defineProps({
  selectedCard: {
    type: Object,
    required: true
  }
});
</script>

<template>
  <div class="detail">
    <h2>{{ selectedCard.title }}</h2>
    <p>{{ selectedCard.content }}</p>
  </div>
</template>

注意事项 #

• 如果用state或props传递复杂对象，刷新页面后数据会丢失，因为这些数据存在内存中。如果需要持久化，建议还是用ID重新请求数据，或者把数据暂存到localStorage里。
• 路由参数和query传递的数据会显示在URL中，不要用来传递敏感信息。

内容的提问来源于stack exchange，提问作者Empty_Soul