VUE: динамический import компонента из $route.params

274

07 февраля 2020, 23:50

Товарищи vue spa строители! Столкнулся с проблемой следующего содержания: мне необходимо динамически подгружать на страницу компонент имя которого передается в компонент родитель из роута. Если более подробно:

<component v-bind:is="'currentStory'"></component>
components: {
  'currentStory': () => {
    return import(`@/components/stories/dnevnik.vue`)
  }
}

Вот так это работает. Но вместо dnevnik.vue мне необходимо определять что-то вроде @/components/stories/${this.$route.params.story}.vue

Но проблема в том, что в контексте components this - равен undefined. Проще говоря, как мне осуществить импорт компонента, имя которого лежит в $route.params.story?

Answer 1

Удивительное совпадение, но именно сегодня пришлось столкнуться с той же проблемой. Удалось найти решение здесь.

Если коротко, то советуют не динамически импортировать компонент в секции components, а вместо этого биндить атрибут is к вычисляемому свойству (computed), которое возвращает динамически-импортированный компонент.

Решение 100% рабочее, проверил локально, но, как мне кажется, недостаточно надежное для использования в продакшн. Уверен, могут всплыть какие-то баги.

<template>
    <component v-bind:is="'currentStory'"></component>
</template>
<script>
export default{
    computed: {
        currentStory() {
            return () => import(`@/components/stories/${ this.$route.params.story }.vue`);
        }
    }
}
</script>