如何使用VUE动态的对异步组件进行加载?

需求是 首先通过一个异步的方式获取一个组件名称的列表,然后根据这个列表(字符串数组形式)加载这个列表上的组件,然后循环显示在页面上

我先照着vue官网上的搞了一个,我现在可以将组件异步加载,但是我不知道该如何进行下去了

<template>
  <div id="Menu">
    <component :is="Link"></component>
  </div>
</template>

<script>
const AsyncComponent = () => ({
  component: import(`../plugs/Link`)
})
export default {
  name: 'Menu',
  components: {

  },
  data () {
    return {
      plugs: []
    }
  },
  created () {

  },
  computed: {
    Link: function () {
      return AsyncComponent
    }
  }
}
</script>

接vv13的回答:
上边的例子是我现在写的样子,容易误导人,我换一种需求的例子
目前需求里 示例中的Link1、Link2等组件不一定存在,全是从另一个接口中获取的组件列表例如:

<template>
  <div id="Menu">
    <!-- 此处并非固定,依据传回来的组建列表显示 -->
  </div>
</template>

<script>
export default {
  name: 'Menu',
  components: {
    // 此处并非固定,所有组件均从后台添加前台无法在components中写死
  },
  data () {
    plugs: [] // 此为组件列表
  },
  created () {
    // 此处获取到列表
    fetch('plugs.php').then((data) => data.json()).then((data) => {
        // data可能是 ['Link1','Link2','components1','components2',...] 所有组件均从后台添加前台无法在components中写死,并且在此假设所有组件文件都由后台上传并存放在 `../plugs/Link` 目录下
        this.plugs = data;
    })
  },
  computed: {

  }
}
</script>

回答:

已经解决了:

<template>
  <div id="menu">
    <component :is="plugItem"
               v-for="(plugItem, plugIndex) in plugs"
               :key='plugIndex'></component>
  </div>
</template>

<script>
export default {
  name: 'menu',
  data () {
    return {
      plugs: [
      ]
    }
  },
  created () {
    fetch('../assets/plugs.json').then((data) => data.text()).then((data) => {
      data.plugs.forEach(item => {
        this.plugs.push(() => import(`@/plugs/${item}`))
      })
    })
  }
}
</script>

回答:

Vue的异步组件实践有两种,第一种是路由懒加载将应用由路由层分为多个chunk,减小单个入口的打包体积。

还有一种就是在Tab页、弹窗等不需要立即展示的都可以使用异步组件进行加载,就拿你的demo来讲:

<template>
  <div id="Menu">
    <component :is="currentLink"></component>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  components: {
    Link1: () => import(`../plugs/Link1`),
    Link2: () => import(`../plugs/Link2`),
  },
  data () {
    return {
      plugs: [],
      currentLink: 'Link1'
    }
  },
}
</script>

首先加载两个动态组件Link1和Link2,通过data中的currentLink来指定动态组件的名称,这样就可以动态的加载组件。

回答:

请问下楼主,@/plugs/目录是VUE工程的内部目录,后台上传的组件存放目录能否具体展示下啊

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注