Nuxt.js dynamic nested views and params

Question

I have a question about dynamic and nested routes in Nuxt. I will create a kind of calculator. The user can choose a theme and get on the first dynamic routes - called _slug.vue - a dynamic navigation from the API about this theme and inside this navigation the user get the detail information about this theme.

On the _slug.vue page is also a dynamic navigation, from the REST API that trigger on the same page the view like: http://localhost/slug/slug2

first question: user trigger a theme on startpage, get the navigation on _slug.vue How can I set the first menu item to active so that its content is displayed directly without the user having to click on the menu item first?

the child-view has to be changed if user click to ther menu items
child view can enter directly on browser and is also available

second question I need to parse in the second step many params to create all user choices, to share the link to other users.

I will get this by creating vuex store "cart"

how can i implement this with the dynamic routes?

like:

http://localhost/slug/slug2?param1=test&param2=test2
http://localhost/slug/slug10?param1=test&param2=test2

You can see that the secondary slug is dynamic, the first slug is only dynamic by choosing this on startpage.

Here is my code:

pages/index.vue

<template>
  <nav class="navigation">
    <ul>
      <li
        v-for="(link, index) in links"
        :key="index"
      >
        <nuxt-link
          :to="link.shortName"
          :data-code="link.shortName"
        >
          {{ link.name }}
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

pages/_slug.vue

<template>
  <div class="calculator">
    <nav class="navigation">
      <ul>
        <li
          v-for="(link, index) in $store.state.calculatorNavigation"
          :key="index"
        >
          <nuxt-link
            :to="{ path: '/' + $store.state.carResult.id + '/' + link.id}"
            :title="link.name"
            append
          >
            {{ link.shortName }}
          </nuxt-link>
        </li>
      </ul>
    </nav>

    <nuxt-child></nuxt-child>
  </div>
</template>

pages/slug/_category.vue

<template>
  <div>
    here show the data for every menu point from the first /slug like /slug/slug2
  </div>
</template>

YuS YuS · Accepted Answer · 2021-03-05T09:52:03

Nuxt.js adding special classnames to all nuxt-link instances depending on the current location. By default it sets nuxt-link-active if current location starts with the URL of the nuxt-link and nuxt-link-exact-active if it is exact match (classnames can be adjusted in config).

In Dynamic Pages to get the params of the route you must use asyncData:

<!-- pages/_slug.vue -->

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // When calling /abc the slug will be "abc"
      return { slug }
    }
  }
</script>

The same way you could get the query string:

<!-- pages/_slug.vue -->

<template>
  <h1>{{ this.slug }} / {{ this.param1 }}</h1>
</template>

<script>
  export default {
    async asyncData({ params, query }) {
      const slug = params.slug
      const param1 = query.param1 // When calling /abc?param1=test the param will be "test"
      return { slug, param1 }
    }
  }
</script>

In case you need to access route's params and query on the client-side as well, you can still use $route builtin (ie. for data fetching).

<script>
  export default {
    mounted() {
      const slug = this.$route.params.slug
      const param1 = this.$route.query.param1

      // some fetching here
    }
  }
</script>

So, now the structure of your pages should be like this:

pages/
├── _slug/
│   ├── index.vue        -->  ie. http://localhost/slug/
│   └── _category.vue    -->  ie. http://localhost/slug/slug2
└── index.vue            -->  http://localhost/

So, in _slug.vue router parameter slug will be available. And in _category.vue both slug and category params will be available.

Nuxt.js dynamic nested views and params

1 Answers