How to access route params: through a fully nuxt-i18n localized route? (localeLocation vs localePath)

user_316408 0
Viewed 1724

Does nuxt/VueRouter always need to have a _some.vue file name to pick up route params?

I wanted to have a button like so:

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

and send params to my route /musicdb/index.vue but this apparently does not work ...

however it works fine with a query string ...

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

Why does params: not work with an index.vue file? I am assuming it is a (base) routing issue?

params: called within index.vue are undefined and do not work!

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

query string works fine:

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

To make it work, you'll need

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

Then, this.$route.params will properly show { userId: "123" }.

This one got released not so long ago in v6.24.0: https://github.com/nuxt-community/i18n-module/releases/tag/v6.24.0

An upgrade may be needed. Further explanation can be found at the bottom of this page: https://i18n.nuxtjs.org/basic-usage/#nuxt-link

PS: localePath alone will not work because it will return a full path but you cannot use params with a path as explained here, rather we need a name. Hence localeLocation is the solution here, because it will provide us the full Vue-router object.

user_88165850
Related