Nuxt3中通过router push传递props失效问题求助

问题分析 #

你在Nuxt2中正常使用的路由props函数模式，在Nuxt3的pages:extend钩子中添加路由时无法生效，仅硬编码props对象能正常传递值。核心需求是跳转页面时传递已加载的数据（如用户信息），避免重复调用API，且不想依赖store。

可行解决方案 #

方案1：利用Vue Router的state传递数据 #

Vue Router 4（Nuxt3内置）支持在路由跳转时通过state属性传递任意数据，该数据不会出现在URL中，适合传递已加载的复杂数据：

1. 修改导航触发代码：

const router = useRouter()
router.push({
  name: 'test-admin___en',
  state: {
    msg: 'message from another page',
    // 可直接传递已加载的用户对象
    // user: loadedUserInfo
  }
})

2. 在目标页面（test.vue）中接收数据：

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script setup>
const route = useRoute()

const props = defineProps({
  msg: {
    type: String,
    default: () => route.state?.msg || 'Hello world!'
  }
})
</script>

方案2：调整路由配置，结合params传递（适合简单参数） #

如果传递的是简单参数（如ID），可以修改路由路径为动态参数，配合props: true实现自动映射：

1. 修改nuxt.config.ts中的路由配置：

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      pages.push({
        name: 'test-admin',
        path: '/admin/users/teste/:msg', // 添加动态参数
        file: '~/pages/admin/users/test.vue',
        props: true, // 开启props自动映射
      })
    },
  },
})

2. 跳转时传递params：

const router = useRouter()
router.push({
  name: 'test-admin___en',
  params: {
    msg: 'message from another page'
  }
})

关于props函数模式失效的说明 #

Nuxt3的路由生成逻辑对pages:extend中添加的自定义路由有特殊处理，直接使用Vue Router的props函数模式会被忽略，这是框架层面的差异导致的。上述两种方案可绕过该限制，满足动态传值需求。

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