H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue不使用路由的情况下,怎么做到组件按需加载?

问题描述

vue项目中有大量弹窗,为了避免手动引入大量组件,使用动态导入组件的方法,即点击按钮时候,动态组装出要弹窗的组件的路径,然后用render函数渲染在页面上,但是webpack打包后只有app.js和vendor.js两个js文件,代码没有被分割。

官网文档说组件按需加载需要配合import的语法,但是在render函数中使用import代替require,组件没有被导入和渲染

用的是vue-cli3的webpack默认配置,请问怎么写配合webpack可以做到代码分割和点击按钮时候才从服务器加载对应组件?

相关代码

在AsyncLoadComp组件接受父组件传递的路径并渲染

<script>
export default {
  props: {
    componentPath: {
      type: String
    }
  },
  render(h, cxt) {
    return h(require(`./${this.componentPath}.vue`).default, {});
  },
};
</script>

在index组件中渲染AsyncLoadComp组件并通过props传递路径

<template>
  <section class="app-main">
    <async-load-comp v-for="path in componentPath" :key="path" :componentPath="path"/>
  </section>
</template>

<script>
import AsyncLoadComp from "../../components/AsyncLoadComp";
export default {
  name: "AppMain",
  components: {
    AsyncLoadComp
  },
  computed: {
    componentPath() { 
      return this.$store.state.app.componentPath;
    }
  },
};
</script>

回答:

我在做一个Dashboard时,页面需要根据用户选择的自定义组件动态加载。这个思路和你的应该比较类似。
我用了<component>组件实现异步加载。

贴下我项目里的部分代码,供参考:

<component :is="componentLoader" />
...
props: {
    //注意,这里传入组件的名称
    com: {
      type: String,
      required: true
    },
  },
  computed: {
    componentLoader () {
      //这里异步加载指定目录下的组件,我将所有需要动态加载的组件放到了一个组件目录里
      return () => import(`@/views/ComponentLib/Components/${this.com}.vue`)
    }
  },
...

也就是说,用户动态加载组件的时候,只需要传递一个name即可。
希望给你启发。

本文地址:H5W3 » vue不使用路由的情况下,怎么做到组件按需加载?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址