按需加载子组件

  <div>
    <div>
      <div class="content">
        <div style="z-index: 999">
          <div :class="['left', inAnimation ? 'Animationleft' : '']" ref="left">
            <component :is="currentLeft"></component>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import eventBus from '@/utils/vueBus'
@Component({
  components: {},
})
export default class Pagecontent extends Vue {
  navInfo = {}
  inAnimation = false
  id = 0
  componentleft = [
    { name: 'firstPage', component: 'indexLeft' },
    { name: 'govern', component: 'governLeft' },
    { name: 'serve', component: 'serveLeft' },
    { name: 'health', component: 'healthLeft' },
    { name: 'education', component: 'educationLeft' },
    { name: 'LC', component: 'lcLeft' },
    { name: 'traffic', component: 'trafficLeft' },
    { name: 'neighbours', component: 'neighboursLeft' },
    { name: 'business', component: 'businessLeft' },
    { name: 'architect', component: 'architectLeft' },
  ]
  activated() {}
  @Watch('navInfo')
  onChangeValue(newVal, oldVal) {
    this.inAnimation = false
    setTimeout(() => {
      this.inAnimation = true
    }, 200)
  }
  get currentLeft() {
    Vue.component(
      this.componentleft[this.id - 1] &&
        this.componentleft[this.id - 1].component,
      () =>
        import(
          `@/components/scene/${this.componentleft[this.id - 1].name}/${
            this.componentleft[this.id - 1].component
          }.vue`
        )
    )
    return this.componentleft[this.id - 1].component
  }
  async created() {
    this.inAnimation = false
    setTimeout(() => {
      this.inAnimation = true
    }, 200)
    //底部导航穿过来的参数
    eventBus.$on('navValue', (data) => {
      this.navInfo = data
      this.id = data.id
    })
  }
}
</script>