How can I get component depends on vue router param?

Question

I have a component Portfolio.vue which has child component Category.vue where I can get by <router-link :to = "{ name: 'category', params: { id: id }}">. Category.vue receives param id from router. In Category.vue I want to import one of many components. For example, if id that Category.vue gets from Portfolio.vue = 'google', so I have id = 'google', and I want to import component google.vue inside Category.vue and render it there.

Here is my Portfolio.vue snippet

<template>
    <div class = "categories">
                        <div
                                class = "category"
                                v-for = "(category, index) in categories"
                                :key = "index"
                        >
                            <div class = "category-title">{{category.name}}</div>
                            <div class = "category-description">{{category.description}}</div>
                            <div class = "category-portfolios">
                                <div
                                        class = "category-portfolio"
                                        v-for = "(portfolio, index) in category.portfolios"
                                        :key = "index"
                                >
                                    <router-link :to = "{ name: 'category', params: { slug: portfolio.slug }}">
                                        {{portfolio.slug}}
                                    </router-link>

                                </div>
                            </div>
                        </div>
                    </div>
</template>

<script>
    export default {
        name: "portfolio",
        data() {
            return {
                pageName: 'Portfolio',
                categories: []
            }
        },
        mounted() {
            fetch('api/portfolio/index')
                .then(response => response.json())
                .then(json => this.categories = Object.assign({}, json.categories))

                .catch(error => {
                    console.log(error);
                })

        }
    }
</script>

<style lang = "scss" scoped>

</style>

Here is my Category.vue

    <template>
        <div>
            {{slug}}
            <component
                    :is="currentTabComponent"
                    class="test"
            ></component> <!--this component should be rendered-->
        </div>
    </template>

    <script>
    // 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: "category",
            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
                }
            },

        }
    </script>

    <style scoped>

    </style>

And my google.vue component

<template>
    <div>
        <h1>This is google portfolio</h1>
    </div>
</template>

<script>
    export default {
        name: "google"
    }
</script>

<style scoped>

</style>

I read this Load component/template depending on the route param vuejs and watched this https://jsfiddle.net/wostex/yLu0uza8/2/ and this https://vuejs.org/v2/guide/components.html#Dynamic-Components, but I still can't get how can I import specific .vue component from folder/file, how can I declare this specific .vue component in parent component (Category.vue) and at last how can I render this specific .vue component in parent component (Category.vue) <template></template>.

So the main question how can I import specific component by router param from the number of components? Thank you.

Answer 1

Couldn´t you just make the component itself dynamicly change its content based on the route id?

Answer 2

You can use the dynamic components and pass the id param as props to your route.
Something like:

const Category = Vue.component('category', {
  name: 'category',
  template: '#category',
  props: ['id']
});

const router = new VueRouter({
  routes: [
    { path: '/category/:id', name: 'category', component: Category, props: true },
  ]
})

and in template:

<template id="category">
  <div>
    <h3>Category : {{ id }}</h3>
    <component :is="id"></component>
  </div>
</template>

fiddle example