1

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 文件？我假设这是一个（基本）路由问题？

params:内部调用index.vue是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;
}
...
4

1 回答 1

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单独是行不通的，因为它会返回一个完整的路径，但你不能像这里解释的那样使用带有路径的参数，而是我们需要一个name. 因此localeLocation是这里的解决方案，因为它将为我们提供完整的 Vue-router 对象。

于 2021-06-14T15:54:14.437 回答