Nuxt.js dynamic nested views and params - vue.js

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>

Answer 1

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.