1.第一例

const Home = resolve => {  import("@/components/home/home.vue").then( module => {      resolve(module)  }}

注：（上面import的時候可以不寫后綴）

export default [{  path: '/home',  name:'home',  component: Home,  meta: {    requireAuth: true, // 添加該屬性可以判斷出該頁面是否需要登錄顯示  },}]

2.第二例

const router = new Router({  routes: [    {       path: '/home',       component: (resolve)=> {         require(['../components/home/home'], resolve) // 省去了在上面去import引入       }     }  ]})

3.第三例,這也是推薦的一種

// r就是resolve// 路由也是正常的寫法 這種是官方推薦的寫的 按模塊劃分懶加載 const Home = r => require.ensure([], () => r(require('../components/home/home')), 'home');const router = new Router({  routes: [    {     path: '/home/home',     component: Home,     name: 'home' ,    }  ]})

下面給大家介紹下vue+webpack實現異步組件加載的代碼，具體代碼如下所示：

HTML

<input type="button" @click="showchild" value="show"> //點擊按鈕后，show為真,先獲取child組件，再渲染div內容 <div id="contain" v-if="show">  <child></child></div>

JS

data () {  return {    msg: 'Welcome to Your Vue.js App',    show:false  }},methods: {  showchild:function(){    this.show=true;  }},components: {  'child': function(resolve) {    require(['./components/child.vue'], resolve);  }} 

注意：加載異步組件的時候，組件名后邊的.vue不要忽略。這個例子應該比較直觀了。點擊按鈕之后改變了變量show的布爾值為真，由于child.vue是異步組件，所以會先ajax獲取組件然后渲染。

總結

以上所述是小編給大家介紹的vue+webpack實現異步加載三種用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！