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>