成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue-router懶加載時添加loading效果

mingde / 2939人閱讀

摘要：近期在做一個微信公眾號的項目，在頁面跳轉(zhuǎn)時發(fā)現(xiàn)頁面會閃一下，用戶體驗很不好，而且如果網(wǎng)慢時頁面是沒有數(shù)據(jù)的樣式會亂很丑。唯一的缺點就是在運行沒問題，但是會有時關(guān)不上效果一直處于狀態(tài)而且很頻繁，剛開始我以為是網(wǎng)絡(luò)的問題，后臺切換到還是不行。

近期在做一個微信公眾號的項目，在頁面跳轉(zhuǎn)時發(fā)現(xiàn)頁面會閃一下，用戶體驗很不好，而且如果網(wǎng)慢時頁面是沒有數(shù)據(jù)的樣式會亂很丑。于是乎，就百度看了前人的各種解決方案，個人覺得以下鏈接中的方案還是很好的，代碼簡潔，效果也很滿意，不需要每個頁面做相對應(yīng)的操作只需要在router.js文件中添加幾行代碼即可。

https://www.jb51.net/article/...

唯一的缺點就是在Android運行沒問題，但是ios會有時關(guān)不上loading效果一直處于loading狀態(tài)（而且很頻繁），剛開始我以為是網(wǎng)絡(luò)的問題，后臺切換到4G還是不行。我就各種調(diào)試，后來發(fā)現(xiàn)加上一個setTimeout便完美的解決了問題，代碼如下：
import Vue from "vue"
import Router from "vue-router"
//loading組件
import {Indicator} from "mint-ui";

Vue.use(Router)
let spinRoute = {
    show() {//加載中顯示loading組件
            Indicator.open({spinnerType: "fading-circle"});//開啟loading組件，這里我用的mint-ui
    },
    resolve(resolve) {//加載完成隱藏loading組件
        return component=>{
            setTimeout(()=>{
                Indicator.close()//關(guān)閉loading組件
                resolve(component);
            }, 10)
        }
    }
}
export default new Router({
    mode: "hash",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/home",
            name: "home",
            component: resolve => {
                spinRoute.show();//加載時開啟loading
                require(["./views/Home.vue"], spinRoute.resolve(resolve))//路由懶加載
            },
            meta: {
                title: "首頁"
            },
        },
        {
            path: "/QRcode",
            name: "QRcode",
            component: resolve => {
                spinRoute.show();
                require(["./views/QRcode.vue"], spinRoute.resolve(resolve))
            },
            meta: {
                title: "游戲推廣"
            }
        },
        {
            path: "/NotAgent",
            name: "NotAgent",
            component: resolve => {
                spinRoute.show();
                require(["./views/NotAgent.vue"], spinRoute.resolve(resolve))
            },
            meta: {
                title: "友情提示"
            }
        },
        {path:"*",redirect:"/home"}
    ]
})

最后，感謝以上鏈接中的大牛給到大家的解決方案.

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99297.html

相關(guān)文章

  • 代碼分割與懶加載情況下（code-splitting+lazyload）抽離懶加載模塊的公用模塊代碼

    摘要：但是同時，抽離到父模塊，也意味著如果有一個懶加載的路由沒有用到模塊，但是實際上引入了父模塊，也為這也引入了的代碼。 前言 我們清楚，在 webpack 中通過CommonsChunkPlugin 可以將 entry 的入口文件中引用多次的文件抽離打包成一個公用文件，從而減少代碼重復(fù)冗余 entry: { main: ./src/main.js, ...

    zebrayoung 評論0 收藏0

  • vue項目首頁加載速度優(yōu)化

    摘要：凡是做的項目，特別是移動端的項目，首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導(dǎo)致這個文件很大，那首屏加載的速度肯定會被拖慢。 凡是做SPA的項目，特別是移動端的SAP項目，首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實踐來做一下總結(jié)。希望拋磚引玉，如果各位有更好的方案，不...

    rickchen 評論0 收藏0

  • VUE知識點集錦

    摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

    Tecode 評論0 收藏0

  • VUE知識點集錦

    摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

    APICloud 評論0 收藏0

  • Vue.js應(yīng)用性能優(yōu)化：第二部分---路由懶加載和 Vendor bundle 反模式

    摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實用的模式。本系列文章基于對性能優(yōu)化過程的學(xué)習(xí)。路徑時才被下載。為了便于理解，文件名稱并不是由生成的真實名稱。接下來，我們將學(xué)習(xí)其他部分和單獨的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載?，F(xiàn)在，我們將更深入地研究，并學(xué)習(xí)...

    0x584a 評論0 收藏0

發(fā)表評論

0條評論

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