Vue的异步组件

方法一、<template>

  <div id="app">
    <button class="btn" @click="clickMe">点我</button>
    <div v-if="show">
　　 <yibuzujian></yibuzujian>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  components:{
    yibuzujian: ()=>import("./yibuzujian")
  },
  data() {
    return {
      show:false,
    };
  },
  methods: {
    clickMe() {
      // this.$toast("你好啊!")
      this.show = !this.show
    }
  },
};
</script>
<style lang="stylus">
#app {
  display: flex;
  justify-content: center;
  align-items: centerS;
}
</style>

方法二:

<template>
  <div id="app">
    <button class="btn" @click="clickMe">点我</button>
    <div v-if="show">
      <AsyncList />
    </div>
    <router-view />
  </div>
</template>
<script>
import loading from "./loading";
import ErroCom from "./ErroCom";
const AsyncList = ()=>({
  component:import("./yibuzujian"),
  loading: loading, //loading组件
  error:ErroCom,//错误展示
  delay:200,//延迟
  timeout:500,//如果3秒没有加载，就出现error组件
})
export default {
  components:{
    AsyncList
  },
  data() {
    return {
      show:false,
    };
  },
  methods: {
    clickMe() {
      // this.$toast("你好啊!")
      this.show = !this.show
    }
  },
};
</script>
<style lang="stylus">
#app {
  display: flex;
  justify-content: center;
  align-items: centerS;
}
</style>