NuxtPage如何通过$router.push传递页面props？新手求助

不需要创建独立页面，一个页面就能实现根据不同调用位置动态更改标题的需求，下面给你几种可行的实现方式：

方式一：路由路径参数传递（URL可见，刷新不丢失） #

这就是你了解到的路由参数方案，只需按规则配置页面文件：

1. 将你的页面文件命名为 pages/dynamic-page/[titlePage].vue，Nuxt会自动生成带动态参数的路由 /dynamic-page/:titlePage；如果标题是可选的，就命名为 pages/dynamic-page/[titlePage]?.vue
2. 跳转时直接传入带参数的路径：

   // Nuxt3
   const router = useRouter()
   router.push('/dynamic-page/首页标题')
   // Nuxt2
   this.$router.push('/dynamic-page/首页标题')
   

3. 页面内获取参数：

   // Nuxt3
   const route = useRoute()
   const titlePage = route.params.titlePage // 拿到传递的标题
   // Nuxt2
   const titlePage = this.$route.params.titlePage
   

方式二：Query参数传递（URL可见，灵活无需改路由） #

不想修改路由结构的话，用query参数更灵活：

1. 跳转时携带query参数：

   // Nuxt3
   const router = useRouter()
   router.push({ path: '/your-page', query: { titlePage: '列表页标题' } })
   // Nuxt2
   this.$router.push({ path: '/your-page', query: { titlePage: '列表页标题' } })
   

2. 页面内获取参数：

   // Nuxt3
   const route = useRoute()
   const titlePage = route.query.titlePage
   // Nuxt2
   const titlePage = this.$route.query.titlePage
   

方式三：状态管理传递（URL不可见，刷新丢失） #

如果不想标题出现在URL里，用状态管理存值：

1. Nuxt3用Pinia的话，先创建store文件 stores/title.ts：

   import { defineStore } from 'pinia'
   export const useTitleStore = defineStore('title', {
     state: () => ({
       currentTitle: ''
     }),
     actions: {
       setTitle(title) {
         this.currentTitle = title
       }
     }
   })
   

2. 跳转前调用store设置标题：

   const titleStore = useTitleStore()
   titleStore.setTitle('详情页标题')
   router.push('/your-page')
   

3. 页面内获取标题：

   const titleStore = useTitleStore()
   const titlePage = titleStore.currentTitle
   

方式四：路由props传递（URL不可见，刷新丢失） #

Nuxt3支持直接给页面组件传props，只需匹配路由名称：

1. 跳转时通过路由名称传入params：

   const router = useRouter()
   router.push({ name: 'your-page', params: { titlePage: '用户中心标题' } })
   

   这里的name对应页面的路由名称，比如pages/your-page.vue的路由name是your-page
2. 页面组件里定义props接收：

   defineProps<{
     titlePage: string
   }>()
   

   之后就能直接在模板里用{{ titlePage }}，或者脚本里用props.titlePage

你之前用$router.push({ path: '', params: { titlePage: 'Value' } })没拿到值，是因为path为空无法指向正确页面，且路由未配置对应params参数导致无法获取。选上面适合你的方式即可，无需额外创建页面。

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