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

資訊專(zhuān)欄INFORMATION COLUMN

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

gaomysion / 2172人閱讀

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

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

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

新建一個(gè) loadable.vue





然后修改router.js

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

這樣在獲取到live.vue之前就會(huì)有自定義的loading展示了
但是路由很多, 我們不可能每個(gè)路由都寫(xiě)一個(gè) loadable.vue, 所以編寫(xiě)一個(gè)函數(shù)來(lái)解決

新建一個(gè) 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"))
    }
  ]
})

這樣一個(gè)極簡(jiǎn)的vue異步函數(shù)就完成了

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

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

相關(guān)文章

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

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

    jackzou 評(píng)論0 收藏0

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

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

    qylost 評(píng)論0 收藏0

  • Vue組件-極簡(jiǎn)的地址選擇器

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

    blastz 評(píng)論0 收藏0

  • Vue組件-極簡(jiǎn)的地址選擇器

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

    shixinzhang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<