Vue学习-异步组件

---

前言

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

---

一、异步组件的简介

所谓的异步组件就是通过import或者require导入的vue组件。
例如：const componentA = import(’@/components/componentA.vue’);
或者 const componentA = require(’@/components/componentA.vue’);
注： @/ 的意思是返回到根路径，如使用vue-cli创建的项目，则使用@/则返回到src目录下。
如果要访问最外层的public目录中的文件则直接使用 / 即可，不加 /public 。

二、使用异步组件的好处

可以避免页面一加载时就去加载全部的组件，从而导致页面访问时间变长的问题。使用异步加载组件后，只有当需要某个组件时才会去加载需要的组件。

三、访问路径案例

1. 使用 @/ 直接条到根目录 src下

代码如下（示例）：

<template>
  <div id="app">
    <AsyncComponent></AsyncComponent>
  </div>
</template>

<script>
import AsyncComponent from '@/components/asyncComponent.vue';
export default ({
  components: {
    AsyncComponent
  }
})
</script>

2. 要访问 public目录下的文件

代码如下（示例）：

<template>
  <div>
    <img :src="url" >
    <button @click="getImg">加载图片</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: ''
    }
  },
  methods: {
    getImg() {
      this.url = '/logo.png'
    }
  }
}
</script>

效果为当点击按钮后就会显示图片。

---

四、异步加载组件案例

代码如下（示例）：

<template>
  <div id="app">
    <AsyncComponent></AsyncComponent>
  </div>
</template>

<script>
export default ({
  components: {
    AsyncComponent: () => import('@/components/asyncComponent.vue')
  }
})
</script>

---

总结

以上就是关于异步组件和关于路径的一些简单的简绍。