nuxt3 通过路由器推送传递道具

Question

这在 nuxt2 中工作正常

我认为在 nuxt3 中，路由的 props 函数模式被忽略了，或者至少看起来是这样。

这是我的代码：

nuxt.config.ts

{
    hooks: {
    'pages:extend'(pages) {
      pages.push({
        name: 'test-admin',
        path: '/admin/users/teste',
        file: '~/pages/admin/users/test.vue',
        props: true,
      })
    },
  },
}

测试.vue

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

<script>
export default defineNuxtComponent({
  name: 'test',
  props: {
    msg: {
      type: String,
      default: 'Hello world!',
    },
  },
})
</script>

我如何触发导航

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

我试图在从一个页面导航到另一个页面时直接传递一些数据，这样我就可以直接显示，而不必再次调用 api 并等待。 我有一个 /admin/users 列出了所有用户，然后 /admin/users/:id 在其中显示一个用户的数据..我已经将数据加载到列表中，所以我不想再次调用 api如果我已经有了数据。这就是我正在努力做的事情。

对于 props，我尝试了 vue router 具有这样的功能模式的示例

{
    props: route => ({ msg: route.params.msg })
}

这不起作用..即使我返回 { msg: "some message" } 它仍然不起作用

唯一的工作方式是：（在路线声明中）

{
    props: { msg: 'this message gets to the component' }
}

但这不起作用，因为我无法在那里设置硬编码数据..我需要它是动态的

在有人提出建议之前，我试图避免在商店中实施解决方法。

Answer 1

更新：页面元而不是道具

在Nuxt3中，我认为满足我们需求的最佳解决方案是使用路由元属性。它将值永久附加到路线。

在

pages:extend

钩子中将自定义属性传递给

meta

参数：

export default defineNuxtConfig({
    hooks: {
        'pages:extend' (pages) {
            pages.push({
                path: '/my-pages-seo-url',
                name: 'my-page',
                meta: {
                    pageId: 'pass-some-id'
                },
                file: '~/pages/page.vue'
            })
        }
    },
});

假设您位于给定的路由中（例如 /my-pages-seo-url），您可以从每个组件访问路由元。我使用页面组件

/pages/page.vue

作为如何访问元的示例：

<script setup>
    const route = useRoute()
    console.log(route.meta.pageId) // 'pass-some-id'
</script>

由于这不需要解决方法，在我看来这似乎是最好的解决方案。如果您使用 nuxt-i18n，语言环境路由将按预期生成，并且它们都提供来自路由元的

pageId

。

希望这个方法对你有帮助。

原答案

如果

NuxtPage

对象在

props

钩子中接受

pages:extend

，那就太好了。此时可以在

props

内传递

app/router.options.ts

:

export default <RouterConfig> {
    routes: (_routes) => {
        _routes.push({
            name: 'my-page',
            path: '/my-page-seo-url',
            props: {
                id: <pass-some-id>,
            },
            component: () => import('~/pages/page.vue').then(r => r.default || r)
        })

        return _routes
    },
}

但是，在使用 nuxt-i18n 时，此解决方法会带来一些路由错误。我猜是因为它在构建过程中调用得太晚了。可能的解决方案是在

pages:extend

中添加路线，然后在

app/router.options.ts

中覆盖它们以传递

props

。看起来像是一个大而奇怪的解决方法。我尝试一下，如果它能正常工作，我会更新这个答案。