vue-router懶加載時(shí)添加loading效果

mingde 發(fā)布于2019-08-23 13:13 / 2919人閱讀

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

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

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

唯一的缺點(diǎn)就是在Android運(yùn)行沒問題，但是ios會(huì)有時(shí)關(guān)不上loading效果一直處于loading狀態(tài)（而且很頻繁），剛開始我以為是網(wǎng)絡(luò)的問題，后臺(tái)切換到4G還是不行。我就各種調(diào)試，后來發(fā)現(xiàn)加上一個(gè)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();//加載時(shí)開啟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"}
    ]
})

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