vue 组件中如何动态引入子组件？

Question

大致的需求如下，希望在父组件中通过一个路径参数（path），然后来动态注册一下子组件。
想过可以在vuex里面存储一个path变量，但是不知道在什么情况下去更新这个path变量（子组件的初始化好像是在vue生命周期钩子函数调用之前的）

<template>
  <figureMode />
</template>

<script lang='ts'>
import { Component, Vue, Watch } from 'vue-property-decorator';
@Component({
  name: 'Index',
  components: {
    FigureMode: () => import(`src/views/${path}`)
  }
})
</script>

Answer 1

可以使用component组件：动态组件 ， component

<component v-if="!!myComponent" :is="myComponent" :key="path"></component>

监听路由，或者在路由钩子中动态引入组件

watch: {
   '$route' (to, from) {
        if(xxx){
            this.myComponent = () => import(`src/views/${to}`)
            this.path = to
        }
   }
}

Answer 2

import 不支持不确定的路径，如果你的path是一个常量倒是可以。