title: How can I get component depends on vue router param?
body: <p>I have a component <code>Portfolio.vue</code> which has child component <code>Category.vue</code> where I can get by <code>&lt;router-link :to = &quot;{ name: 'category', params: { id: id }}&quot;&gt;</code>. <code>Category.vue</code> receives param <code>id</code> from router.
  In <code>Category.vue</code> I want to import one of many components. For example, if <code>id</code> that <code>Category.vue</code> gets from <code>Portfolio.vue</code> = 'google', so I have <code>id = 'google'</code>, and I want to import component <code>google.vue</code> inside <code>Category.vue</code> and render it there.</p>
  <p>Here is my <code>Portfolio.vue</code> snippet</p>
  <pre><code>&lt;template&gt;
      &lt;div class = &quot;categories&quot;&gt;
                          &lt;div
                                  class = &quot;category&quot;
                                  v-for = &quot;(category, index) in categories&quot;
                                  :key = &quot;index&quot;
                          &gt;
                              &lt;div class = &quot;category-title&quot;&gt;{{category.name}}&lt;/div&gt;
                              &lt;div class = &quot;category-description&quot;&gt;{{category.description}}&lt;/div&gt;
                              &lt;div class = &quot;category-portfolios&quot;&gt;
                                  &lt;div
                                          class = &quot;category-portfolio&quot;
                                          v-for = &quot;(portfolio, index) in category.portfolios&quot;
                                          :key = &quot;index&quot;
                                  &gt;
                                      &lt;router-link :to = &quot;{ name: 'category', params: { slug: portfolio.slug }}&quot;&gt;
                                          {{portfolio.slug}}
                                      &lt;/router-link&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: &quot;portfolio&quot;,
          data() {
              return {
                  pageName: 'Portfolio',
                  categories: []
              }
          },
          mounted() {
              fetch('api/portfolio/index')
                  .then(response =&gt; response.json())
                  .then(json =&gt; this.categories = Object.assign({}, json.categories))
  
                  .catch(error =&gt; {
                      console.log(error);
                  })
  
          }
      }
  &lt;/script&gt;
  
  &lt;style lang = &quot;scss&quot; scoped&gt;
     
  &lt;/style&gt;
  </code></pre>
  <p>Here is my <code>Category.vue</code></p>
  <pre><code>    &lt;template&gt;
          &lt;div&gt;
              {{slug}}
              &lt;component
                      :is=&quot;currentTabComponent&quot;
                      class=&quot;test&quot;
              &gt;&lt;/component&gt; &lt;!--this component should be rendered--&gt;
          &lt;/div&gt;
      &lt;/template&gt;
      
      &lt;script&gt;
      // import this.$route.params.slug   from './components/portfolios/this.$route.params.slug' 
  //this code is wrong, but the main idea is to import component
  
          export default {
              name: &quot;category&quot;,
              data() {
                  return {
                      slug: ''
                  }
              },
              beforeCreate() {
                  this.slug = this.$route.params.slug;
              },
              computed: {
                  // maybe here I should definded what component should I render. This was in example in Vue documentation
                  currentTabComponent: function () {
                      return this.slug
                  }
              },
      
          }
      &lt;/script&gt;
      
      &lt;style scoped&gt;
      
      &lt;/style&gt;
  </code></pre>
  <p>And my <code>google.vue</code> component</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;This is google portfolio&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: &quot;google&quot;
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  <p>I read this <a href="https://stackoverflow.com/questions/43555711/load-component-template-depending-on-the-route-param-vuejs">Load component/template depending on the route param vuejs</a> and watched this <a href="https://jsfiddle.net/wostex/yLu0uza8/2/" rel="nofollow noreferrer">https://jsfiddle.net/wostex/yLu0uza8/2/</a> and this <a href="https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components</a>, but I still can't get how can I import specific <code>.vue</code> component from folder/file, how can I declare this specific <code>.vue</code> component in parent component (<code>Category.vue</code>) and at last how can I render this specific <code>.vue</code> component in parent component (<code>Category.vue</code>) <code>&lt;template&gt;&lt;/template&gt;</code>.</p>
  <p>So the main question how can I import specific component by router param from the number of components?
  Thank you.</p>