如何将表单数据传递至其他页面并在公告页展示表单内容？

一、全局状态管理（SPA首选） #

如果你的项目是Vue/React这类单页应用，用全局状态管理能轻松实现跨组件数据共享：

• Vue项目（Pinia/Vuex）

  1. 新建状态仓库，定义存储公告数据的字段，比如noticeData
  2. 表单提交时，调用仓库的方法把标题、文本存入状态
  3. 公告页直接从仓库读取数据渲染
     示例代码（Pinia）：

  // 状态仓库文件
  import { defineStore } from 'pinia'
  export const useNoticeStore = defineStore('notice', {
    state: () => ({
      noticeData: { title: '', content: '' }
    }),
    actions: {
      setNoticeData(data) {
        this.noticeData = data
      }
    }
  })
  
  // 表单组件
  import { useNoticeStore } from '@/stores/noticeStore'
  import { useRouter } from 'vue-router'
  const noticeStore = useNoticeStore()
  const router = useRouter()
  const title = ref('')
  const content = ref('')
  
  const handleSubmit = () => {
    noticeStore.setNoticeData({ title: title.value, content: content.value })
    router.push('/notice')
  }
  
  // 公告页组件
  import { useNoticeStore } from '@/stores/noticeStore'
  const noticeStore = useNoticeStore()
  

  公告页模板里直接用{{ noticeStore.noticeData.title }}和{{ noticeStore.noticeData.content }}展示即可。

• React项目（Redux/Context API）
  逻辑类似：通过全局上下文或状态仓库存储表单数据，公告页组件订阅并读取数据渲染。

二、路由传参（临时数据传递） #

如果只是单次跳转传递数据，不想用全局存储，可直接通过路由带参数：

• Vue Router
  提交表单时跳转并携带query参数：

  const handleSubmit = () => {
    router.push({
      path: '/notice',
      query: { title: title.value, content: content.value }
    })
  }
  

  公告页获取参数：

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const title = route.query.title || ''
  const content = route.query.content || ''
  

  注意：参数会暴露在URL里，不适合敏感数据，刷新页面数据仍保留。

• React Router
  用navigate跳转时携带state：

  import { useNavigate } from 'react-router-dom'
  const navigate = useNavigate()
  const handleSubmit = () => {
    navigate('/notice', { state: { title, content } })
  }
  

  公告页用useLocation读取：

  import { useLocation } from 'react-router-dom'
  const location = useLocation()
  const { title = '', content = '' } = location.state || {}
  

  这种方式URL不暴露数据，但刷新页面后数据会丢失。

三、本地存储（持久化需求） #

如果需要数据在页面刷新后仍保留，用localStorage或sessionStorage：

• 表单提交时保存数据：

  const handleSubmit = () => {
    const formData = { title: title.value, content: content.value }
    localStorage.setItem('noticeData', JSON.stringify(formData))
    router.push('/notice')
  }
  

• 公告页读取数据：

  const noticeData = JSON.parse(localStorage.getItem('noticeData')) || { title: '', content: '' }
  

  注意：数据存在用户本地，清空浏览器缓存会丢失，且不要存敏感信息。

四、后端存储（多用户/长期保存） #

如果需要多用户共享数据或长期留存，提交表单时把数据传给后端接口，公告页从后端拉取：

• 表单提交请求示例：

  const handleSubmit = async () => {
    await fetch('/api/save-notice', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: title.value, content: content.value })
    })
    router.push('/notice')
  }
  

• 公告页获取数据示例：

  // Vue
  const noticeData = ref({ title: '', content: '' })
  onMounted(async () => {
    const res = await fetch('/api/latest-notice')
    noticeData.value = await res.json()
  })
  
  // React
  const [noticeData, setNoticeData] = useState({ title: '', content: '' })
  useEffect(() => {
    fetch('/api/latest-notice')
      .then(res => res.json())
      .then(data => setNoticeData(data))
  }, [])
  

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