title: Nuxt.js dynamic nested views and params
body: <p>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 - <strong>called _slug.vue</strong> - a dynamic navigation from the API about this theme and inside this navigation the user get the detail information about this theme.</p>
  <p>On the <code>_slug.vue</code> page is also a dynamic navigation, from the REST API that trigger on the same page the  view like: <code>http://localhost/slug/slug2</code></p>
  <p><strong>first question:</strong>
  <em>user trigger a theme on startpage, get the navigation on _slug.vue</em>
  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?</p>
  <ul>
  <li>the child-view has to be changed if user click to ther menu items</li>
  <li>child view can enter directly on browser and is also available</li>
  </ul>
  <p><strong>second question</strong>
  I need to parse in the second step many params to create all user choices, to share the link to other users.</p>
  <p>I will get this by creating vuex store &quot;cart&quot;</p>
  <p>how can i implement this with the dynamic routes?</p>
  <p>like:</p>
  <pre><code>http://localhost/slug/slug2?param1=test&amp;param2=test2
  http://localhost/slug/slug10?param1=test&amp;param2=test2
  </code></pre>
  <p>You can see that the secondary slug is dynamic, the first slug is only dynamic by choosing this on startpage.</p>
  <p>Here is my code:</p>
  <p><strong>pages/index.vue</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;nav class=&quot;navigation&quot;&gt;
      &lt;ul&gt;
        &lt;li
          v-for=&quot;(link, index) in links&quot;
          :key=&quot;index&quot;
        &gt;
          &lt;nuxt-link
            :to=&quot;link.shortName&quot;
            :data-code=&quot;link.shortName&quot;
          &gt;
            {{ link.name }}
          &lt;/nuxt-link&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>pages/_slug.vue</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;calculator&quot;&gt;
      &lt;nav class=&quot;navigation&quot;&gt;
        &lt;ul&gt;
          &lt;li
            v-for=&quot;(link, index) in $store.state.calculatorNavigation&quot;
            :key=&quot;index&quot;
          &gt;
            &lt;nuxt-link
              :to=&quot;{ path: '/' + $store.state.carResult.id + '/' + link.id}&quot;
              :title=&quot;link.name&quot;
              append
            &gt;
              {{ link.shortName }}
            &lt;/nuxt-link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;nuxt-child&gt;&lt;/nuxt-child&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>pages/slug/_category.vue</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      here show the data for every menu point from the first /slug like /slug/slug2
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>