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

近期在作一個微信公衆號的項目，在頁面跳轉時發現頁面會閃一下，用戶體驗很很差，並且若是網慢時頁面是沒有數據的樣式會亂很醜。因而乎，就百度看了前人的各類解決方案，我的以爲如下連接中的方案仍是很好的，代碼簡潔，效果也很滿意，不須要每一個頁面作相對應的操做只須要在router.js文件中添加幾行代碼便可。

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

惟一的缺點就是在Android運行沒問題，可是ios會有時關不上loading效果一直處於loading狀態（並且很頻繁），剛開始我覺得是網絡的問題，後臺切換到4G仍是不行。我就各類調試，後來發現加上一個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()//關閉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'}
    ]
})

最後，感謝以上連接中的大牛給到你們的解決方案.