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'}
    ]
})

最后，感谢以上连接中的大牛给到你们的解决方案.