在vue项目如何引入异步组件?_vue-异步组件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_34254848/article/details/113580503

异步组件在项目执行时按需加载，提高响应速度。例如，首次加载只加载首页资源，切换到新闻页时才加载新闻页资源。这种做法在大型项目中能显著加快页面打开速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步组件

在项目执行的时候不加载，而是在需要的时候加载。比如说，你有10个页面，打开第一个页面，它只加载第一个页面，另外9个不加载。这样响应的速度会快很多。

下面的例子是打开页面会在Home页面了，只加载Home页面资源，点击切换视图，到News页面了，才会加载News页面的资源。优点就是项目太庞大，异步组件就会使页面打开更快。

Home页面

<template>
  <div> 
    Home
  </div>
 </template>
<script>
export default {
  name:"Home"
}
</script>

News页面

<template>
  <div> 
    News
  </div>
 </template>
<script>
export default {
  name:"News"
}
</script>
<style>
</style>

App主页面

<template>
  <div> 
    App
     <component :is="currentComponent"></component>
     <button @click="chengeView">切换视图</button>
  </div>
 </template>
<script>
//这样引入就是异步组件
const Home = () => import("./home")
const News = () => import("./news")
export default {
  name:"App",
  data(){
    return{
    //默认值显示Home
      currentComponent:Home ,
      //定一个默认值进行取反
      flag:false
    }
  },
  compinents:{
    Home,
    News 
  },
  methods:{
    chengeView(){
      if(this.flag){
        this.currentComponent = Home
        this.flag = false
      }else{
        this.currentComponent = News 
        this.flag = true
      }
    }
  }
}
</script>
<style>
</style>