Vue+Element 动态引入不同组件

所使用的文件存放的位置，以下文件的名称及存放位置可根据需求自行决定

---

index.vue 用户前台操作的页面

<template>
  <div>
    <div>
      <h3>动态引入组件方法</h3>
      <el-button type="primary" @click="goPage('one')">跳转组件</el-button>
      <el-button type="primary" @click="goPage('two')">跳转组件</el-button>
      <el-button type="primary" @click="goPage('three')">跳转组件</el-button>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
 
  created() {},

  mounted() {},

  methods: {
    goPage(path) {
      this.$router.push({
        path: "/module", // 此路径为新页面跳转的路由路径
        query: {
          path: path
        }
      })
    }
  }
}
</script>

---

module.vue 点击跳转的新页面，若无需跳转页面可忽略此步，将引入方法写在操作页面中

<template>
  <div>
    <div>
      <p>以下是动态引入的组件内容：</p>
      <component :is="component"></component>
    </div>
  </div>
</template>

<script>
export default {
  name: "myModule",
  data() {
    return {
      component: null, // 动态信息组件
      path: null // 接收动态组件路径
    }
  },
  computed: {
    loader() {
      // import 函数无法引入带有变量的路径
      return () => require.ensure([], require => require(`./${this.path}.vue`))
    }
  },
  created() {
    this.path = this.$route.query && this.$route.query.path
  },
  mounted() {
    this.importComponents()
  },
  methods: {
    /** 动态引入组件 */
    importComponents() {
      this.loader().then(() => {
        this.component = () => this.loader()
      })
    }
  }
}
</script>

---

one.vue、two.vue、three.vue 分别为需要引入的不同组件示例

<template>
  <div>
    <span>我是组件一</span>
  </div>
</template>

<script>
export default {
  name: "PackOne",
  data() {
    return {}
  }
}
</script>

<template>
  <div>
    <span>我是组件二</span>
  </div>
</template>

<script>
export default {
  name: "PackTwo",
  data() {
    return {}
  }
}
</script>

<template>
  <div>
    <span>我是组件三</span>
  </div>
</template>

<script>
export default {
  name: "PackThree",
  data() {
    return {}
  }
}
</script>