Vue3 Router传参疑问：新闻页无法获取state参数及方案咨询

1. 该传参方式是否正确？ #

这种传参方式不符合你的需求，核心原因有两点：

• state 依赖HTML5 History API存储，数据仅存在浏览器会话历史中，页面刷新后会直接丢失，满足不了你“页面支持刷新”的要求；
• state 不属于路由参数范畴，和路由路径完全分离，且存储容量有限，不适合传递体积较大的content字段。

你当前获取不到state，大概率是跳转时的写法有误，比如没有在$router.push中正确传入state对象，但即便写法正确，也解决不了刷新丢失的问题。

2. 若正确，如何获取state变量？ #

如果一定要用state传参（不推荐你的场景），在Vue3 Options API中，正确的获取方式如下：

// 在NewsPage组件的生命周期钩子中
mounted() {
  const routeState = this.$router.currentRoute.value.state
  console.log(routeState) // 可拿到跳转时传入的state数据
}

注意：页面刷新后state会被清空，且无法存储大体积内容。

适配你需求的最优解决方案 #

结合你指定路由格式、获取完整字段、支持页面刷新的三个核心需求，推荐以下方案：

方案一：通过接口拉取数据（首选） #

1. 跳转时仅传递新闻唯一标识（如id），保持你要求的路由格式：/:countryCode/:newsSectionSlug/:id-:publishDate
2. 在NewsPage组件中，通过路由参数拿到id，再调用后端接口获取title、mediaURL、content等完整数据。

示例代码：

// NewsCard组件的跳转逻辑
methods: {
  goToNewsDetail(news) {
    this.$router.push({
      name: 'NewsPage',
      params: {
        countryCode: 'sv',
        newsSectionSlug: 'nyheter',
        id: news.id,
        publishDate: news.publishDate.replace(/-/g, '') // 转成无横杠的字符串适配路由格式
      }
    })
  }
}

// NewsPage组件获取数据
mounted() {
  const { id } = this.$route.params
  // 调用接口获取完整新闻数据
  this.$http.get(`/api/news/detail/${id}`).then(res => {
    this.newsInfo = res.data // 包含title、mediaURL、content等字段
  })
}

优点：完全支持页面刷新，不受数据体积限制，路由路径简洁合规。

方案二：路由查询参数（仅适合小体积数据） #

若不想调用接口，可将小体积字段（如title、mediaURL）放在查询参数中，但content因体积大不建议使用此方式：

// NewsCard组件跳转
methods: {
  goToNewsDetail(news) {
    this.$router.push({
      name: 'NewsPage',
      params: {
        countryCode: 'sv',
        newsSectionSlug: 'nyheter',
        id: news.id,
        publishDate: news.publishDate.replace(/-/g, '')
      },
      query: {
        title: news.title,
        mediaURL: news.mediaURL
      }
    })
  }
}

// NewsPage组件获取查询参数
mounted() {
  const { title, mediaURL } = this.$route.query
  // content仍建议通过接口获取
}

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