异步组件的局部注册

我是用异步组件在局部注册了之后,点击页面第一次进入的时候加载不出来,关掉页面再次进入的时候就加载出来了,但是点击浏览器上的刷新按钮之后,组件就又加载不出来了,这是什么原因呢

注册和加载的先后顺序的问题吧。
先执行注册的代码,然后在执行加载的代码。
如果先执行加载的代码,就会找不到组件。
检查一下执行的先后顺序吧。


我是这样写的,有什么问题吗

是不是那种直接显示在首页上的组件就不能用异步组件的局部注册,只有像抽屉、弹窗这种一开始没有显示在页面的上的才能用异步组件的局部注册,
局部注册是不是就像是,一个弹窗,如果没有点击出来的话,在页面是是没有这个组件的div的


就像是这样,如果这个绿框中的drawer组件没有出来的话,左侧的代码框中是不是就应该没有这一段的代码

你这是路由的写法,组件里要这样:

import { defineAsyncComponent } form 'vue

......

components: {
 master: defineAsyncComponent(() => import('./base-page/list-form.vue'))
}

需要加上 defineAsyncComponent

异步组件一般和动态组件组合使用,你这么用基本还是一起加载了。

我是这么用的:
// component.js

import { defineAsyncComponent } from 'vue'

/**
 * 注册动态组件
 */
export default {
  'plat-baseset': defineAsyncComponent(() => import('./plat-baseset/index.vue')),
  master: defineAsyncComponent(() => import('./base-page/list-form.vue')),
  list: defineAsyncComponent(() => import('./base-page/list.vue')),
  mod: defineAsyncComponent(() => import('./base-page/form.vue')),
  form: defineAsyncComponent(() => import('./base-page/form.vue'))
}

然后组件里面使用动态组件

    <!--弹窗,表单-->
    <div v-dialogdrag="buttonMeta.dialogWidth">
      <el-dialog
        :title="buttonMeta.dialogTitle"
        v-model="isShow"
        :modal="true"
        :width="buttonMeta.dialogWidth"
      >
        <component
          :is="componentKind[buttonMeta.controlKey]"
          :moduleId="buttonMeta.openModuleId"
          :dataId="dataListState.choice.dataId"
          :formMetaId="buttonMeta.formMetaId"
          :actionId="buttonMeta.actionId"
          :type="buttonMeta.btnKind"
        >
        </component>
      </el-dialog>
    </div>
// 组件字典
import componentKind from '../project/component.js'

另外,这个和啥时候会被加载以及被渲染,没有必然的约束关系,看具体如何使用。

它找不到这个怎么

这是vue2.x的吧 vue3才有这个新特性 你之前的写法是按需加载的动态组件