Flutter实现点击文章条目跳转详情页并传递数据求助

下面针对不同技术栈给出具体实现方案，核心思路是通过路由传参或状态传递将点击的文章数据传递到详情页：

React 方案（基于 React Router） #

列表页实现 #

绑定点击事件，跳转时传递文章ID（推荐，避免大数据量暴露在URL）或直接传递文章数据：

import { useNavigate } from 'react-router-dom'; // React Router v6

function ArticleList() {
  const navigate = useNavigate();
  const articles = [
    { id: 1, title: "第一篇文章", content: "这是第一篇文章的完整内容..." },
    { id: 2, title: "第二篇文章", content: "这是第二篇文章的完整内容..." }
  ];

  const handleClick = (article) => {
    // 方式1：URL传ID（推荐）
    navigate(`/article/${article.id}`);
    
    // 方式2：通过state传递完整数据（适合小数据量）
    // navigate('/article/detail', { state: { article } });
  };

  return (
    <div>
      {articles.map(article => (
        <div 
          key={article.id} 
          onClick={() => handleClick(article)}
          style={{ cursor: 'pointer', padding: '10px', borderBottom: '1px solid #eee' }}
        >
          <h3>{article.title}</h3>
          <p>{article.content.slice(0, 50)}...</p>
        </div>
      ))}
    </div>
  );
}

详情页实现 #

解析传递的参数，获取对应文章数据：

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

function ArticleDetail() {
  const { id } = useParams(); // 获取URL中的ID
  const location = useLocation(); // 获取state中的数据（方式2用）

  // 方式1：根据ID查找数据（模拟接口请求或本地数据匹配）
  const articles = [/* 同列表页数据或接口返回 */];
  const currentArticle = articles.find(item => item.id === parseInt(id));

  // 方式2：直接读取state数据
  // const currentArticle = location.state?.article;

  return (
    <div>
      <h1>{currentArticle?.title}</h1>
      <p>{currentArticle?.content}</p>
    </div>
  );
}

Vue 方案（基于 Vue Router） #

列表页实现 #

绑定点击事件，跳转时传递参数：

<template>
  <div>
    <div 
      v-for="article in articles" 
      :key="article.id" 
      @click="goToDetail(article)"
      style="cursor: pointer; padding: 10px; border-bottom: 1px solid #eee;"
    >
      <h3>{{ article.title }}</h3>
      <p>{{ article.content.slice(0, 50) }}...</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        { id: 1, title: "第一篇文章", content: "这是第一篇文章的完整内容..." },
        { id: 2, title: "第二篇文章", content: "这是第二篇文章的完整内容..." }
      ]
    };
  },
  methods: {
    goToDetail(article) {
      // 方式1：URL传ID（推荐）
      this.$router.push(`/article/${article.id}`);

      // 方式2：通过params隐式传递（刷新页面会丢失）
      // this.$router.push({ name: 'ArticleDetail', params: { article } });
    }
  }
};
</script>

详情页实现 #

解析路由参数获取文章数据：

<template>
  <div>
    <h1>{{ currentArticle.title }}</h1>
    <p>{{ currentArticle.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentArticle: {}
    };
  },
  created() {
    // 方式1：获取URL参数ID
    const id = this.$route.params.id;
    const articles = [/* 同列表页数据 */];
    this.currentArticle = articles.find(item => item.id === parseInt(id));

    // 方式2：读取params中的文章数据
    // this.currentArticle = this.$route.params.article;
  }
};
</script>

原生 JavaScript 方案 #

列表页实现 #

通过window.location.href跳转，URL携带文章ID：

<div id="articleList"></div>

<script>
const articles = [
  { id: 1, title: "第一篇文章", content: "这是第一篇文章的完整内容..." },
  { id: 2, title: "第二篇文章", content: "这是第二篇文章的完整内容..." }
];

const listContainer = document.getElementById('articleList');
articles.forEach(article => {
  const row = document.createElement('div');
  row.style.cursor = 'pointer';
  row.style.padding = '10px';
  row.style.borderBottom = '1px solid #eee';
  
  const title = document.createElement('h3');
  title.textContent = article.title;
  const content = document.createElement('p');
  content.textContent = article.content.slice(0, 50) + '...';
  
  row.appendChild(title);
  row.appendChild(content);
  
  row.addEventListener('click', () => {
    window.location.href = `article-detail.html?id=${article.id}`;
  });
  
  listContainer.appendChild(row);
});
</script>

详情页实现 #

解析URL参数，匹配对应文章数据：

<div id="articleDetail"></div>

<script>
const articles = [/* 同列表页数据或接口请求获取 */];
const urlParams = new URLSearchParams(window.location.search);
const articleId = parseInt(urlParams.get('id'));
const currentArticle = articles.find(item => item.id === articleId);

const detailContainer = document.getElementById('articleDetail');
const title = document.createElement('h1');
title.textContent = currentArticle.title;
const content = document.createElement('p');
content.textContent = currentArticle.content;

detailContainer.appendChild(title);
detailContainer.appendChild(content);
</script>

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