vue-router懒加载时添加loading效果

落日映苍穹つ 2023-06-06 07:59 19阅读 0赞

近期在做一个微信公众号的项目，在页面跳转时发现页面会闪一下，用户体验很不好，而且如果网慢时页面是没有数据的样式会乱很丑。于是乎，就百度看了前人的各种解决方案，个人觉得以下链接中的方案还是很好的，代码简洁，效果也很满意，不需要每个页面做相对应的操作只需要在router.js文件中添加几行代码即可。

[https://www.jb51.net/article/...][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'}
        ]
    })

最后，感谢以上链接中的大牛给到大家的解决方案.

[https_www.jb51.net_article_...]: https://www.jb51.net/article/137689.htm