如何访问路由参数：通过完全 nuxt-i18n 本地化路由？ （localeLocation 与 localePath）

Question

是否 nuxt/VueRouter 总是需要 _some.vue 文件名来获取路由参数？

我想要一个这样的按钮：

<NuxtLink :to="localePath({ name: 'musicdb', params: { search: page.shortTitle }})">
  Search Title
</NuxtLink> 

并将参数发送到我的路线 /musicdb/index.vue 但这显然不起作用...

但是它可以很好地处理查询字符串...

<NuxtLink :to="localePath({ name: 'musicdb', query: { search: page.shortTitle }})">
  Search Title
</NuxtLink>

为什么 params: 不能使用 index.vue 文件？我假设这是一个（基本）路由问题？

在 index.vue 中调用的

params: 是 undefined 并且不起作用！

<script> 
// /musicdb/index.vue page
export default {
created() {
    console.log(this.$route.params.search); // undefined
    this.query = this.$route.params.search;
}
...

查询字符串工作正常：

<script> 
// /musicdb/index.vue page
export default {
created() {
    console.log(this.$route.query.search); // "hello search string"
    this.query = this.$route.query.search;
}
...

Answer 1

要让它发挥作用，您需要

<nuxt-link :to="localeLocation({ name: 'test', params: { userId: '123' } })">
  Go to the test page with some fancy params
</nuxt-link>

然后，this.$route.params 将正确显示 { userId: "123" }。

这个不久前在 v6.24.0 中发布：https://github.com/nuxt-community/i18n-module/releases/tag/v6.24.0

可能需要升级。可以在本页底部找到进一步的解释：https://i18n.nuxtjs.org/basic-usage/#nuxt-link

---

PS：单独使用 localePath 是行不通的，因为它 return 将是完整路径，但您不能将参数与路径一起使用 here，而我们需要 name。因此 localeLocation 是这里的解决方案，因为它将为我们提供完整的 Vue-router 对象。