極簡Vue的異步組件函數

jackzou 發布于2019-08-02 10:57 / 502人閱讀

摘要：默認值是然后修改這樣在獲取到之前就會有自定義的展示了但是路由很多我們不可能每個路由都寫一個所以編寫一個函數來解決新建一個這里官網可以知道具體有哪些參數可以設置然后修改一下這樣一個極簡的異步函數就完成了

export default new Router({
  routes: [
    {
      path: "/live",
      name: "live",
      component: () => import("@/view/live/live.vue")
    }
  ]
})

上面的代碼是很常見的router代碼分割,只在代碼路由為live才會去加載live.vue
但這樣在live.vue獲取的過程將是一片空白,什么也沒有,體驗不好, 利用vue提供的異步組建可以解決

新建一個 loadable.vue





然后修改router.js

export default new Router({
  routes: [
    {
      path: "/live",
      name: "live",
      component: import("loadable.vue")
    }
  ]
})

這樣在獲取到live.vue之前就會有自定義的loading展示了
但是路由很多, 我們不可能每個路由都寫一個 loadable.vue, 所以編寫一個函數來解決

新建一個 loadable.js

import LoadingComponent from "./load.vue"

export default (asyncComponent) => {
    const Com= () => ({
        // 這里vue官網可以知道具體有哪些參數可以設置
        // https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81
        component: asyncComponent(),
        loading: LoadingComponent
    })
    return {
        render (h) {
          return h(Com, {})
        }
    }
}

然后修改一下router.js

import loadable from "loadable.js"
export default new Router({
  routes: [
    {
      path: "/live",
      name: "live",
      component: loadable (() => import("@/view/live/live.vue"))
    }
  ]
})

這樣一個極簡的vue異步函數就完成了

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52665.html

極簡Vue的異步組件函數

摘要：默認值是然后修改這樣在獲取到之前就會有自定義的展示了但是路由很多我們不可能每個路由都寫一個所以編寫一個函數來解決新建一個這里官網可以知道具體有哪些參數可以設置然后修改一下這樣一個極簡的異步函數就完成了 export default new Router({ routes: [ { path: /live, name: live, comp...

gaomysion 2019-08-22 18:50 評論0 收藏0
極簡Vue的異步組件函數

摘要：默認值是然后修改這樣在獲取到之前就會有自定義的展示了但是路由很多我們不可能每個路由都寫一個所以編寫一個函數來解決新建一個這里官網可以知道具體有哪些參數可以設置然后修改一下這樣一個極簡的異步函數就完成了 export default new Router({ routes: [ { path: /live, name: live, comp...

qylost 2019-08-30 15:54 評論0 收藏0
Vue組件-極簡的地址選擇器

摘要：一前言本文用完成一個極簡的地點選擇器，我們接下來帶大家實現這個。當然其中也有一些值得學習與注意的地方。但是這其實也有無法監控的數據。一、前言本文用Vue完成一個極簡的地點選擇器，我們接下來帶大家實現這個。當然其中也有一些值得學習與注意的地方。話不多說，我們先上demo圖。因為每個人的需要不一樣，我這邊就不在實現更多的功能，所以留有更大的空間供大家增刪改。 showImg(https...

blastz 2019-08-29 15:32 評論0 收藏0
Vue組件-極簡的地址選擇器

摘要：一前言本文用完成一個極簡的地點選擇器，我們接下來帶大家實現這個。當然其中也有一些值得學習與注意的地方。但是這其實也有無法監控的數據。一、前言本文用Vue完成一個極簡的地點選擇器，我們接下來帶大家實現這個。當然其中也有一些值得學習與注意的地方。話不多說，我們先上demo圖。因為每個人的需要不一樣，我這邊就不在實現更多的功能，所以留有更大的空間供大家增刪改。 showImg(https...

shixinzhang 2019-08-26 11:54 評論0 收藏0