根据路由动态注册组件失败

小墨宝2024-02-03 15:55

动态注册组件

方式1 import

这种跟webpack的版本有关系 import低版本不支持传入动态参数

<template>
        <components :is="componentName" v-show="isShow" :key="componentName"></components>
</template>


const _import = file => () => import(/* webpackChunkName: `[request][index]` */ `@/pages${file}/index.vue`);

let async = _import(path);
let timer = setTimeout(() => {
    async().then(com => {
  
        Vue.component(name, com.default);
        this.componentName = name;
        this.prevPath = path;
        this.isShow = true
    },
    errors => {
        this.componentName = Error;
        this.$message.error(
            `模块地址加载失败,地址：${path}，具体错误：${errors}`
        );
        console.error(errors);
    });
})

方式2 require

这种方式能引入组件成功，并且能打印出com.default。但是刷新页面的时候会出现报错（可能是各种插件的版本导致）

<template>
        <components :is="componentName" v-show="isShow" :key="componentName"></components>
</template>



let timer = setTimeout(() => {
    require([`@/views${path}/index.vue`], (com) => {
          Vue.component(name, com.default)
           this.componentName = name;
       },(errors)=>{
         this.$message.error(
               `模块地址加载失败,地址：${path}，具体错误：${errors}`
           );
           console.error(errors);
       })
})

解决：替换Vue.component（）

 Vue.component(name, com.default)
 替换成
this.$options.components[name] = com.default