国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

極簡Vue的異步組件函數(shù)

gaomysion / 2177人閱讀

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

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, 所以編寫一個函數(shù)來解決

新建一個 loadable.js

import LoadingComponent from "./load.vue"

export default (asyncComponent) => {
    const Com= () => ({
        // 這里vue官網(wǎng)可以知道具體有哪些參數(shù)可以設(shè)置
        // 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異步函數(shù)就完成了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96265.html

相關(guān)文章

  • 極簡Vue的異步組件函數(shù)

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

    jackzou 評論0 收藏0

  • 極簡Vue的異步組件函數(shù)

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

    qylost 評論0 收藏0

  • Vue組件-極簡的地址選擇器

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

    blastz 評論0 收藏0

  • Vue組件-極簡的地址選擇器

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

    shixinzhang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<