Add loading effect when Vue router is lazy to load

Recently, I was doing a project of WeChat public number. When the page jumped, I found that the page would flash, the user experience was very bad, and if the page was slow, the style of the page would be chaotic. Therefore, baidu looked at the previous solutions, and I think the following links are still very good, the code is simple, and the effect is very satisfactory. It doesn't need to do the corresponding operation on each page, just need to add a few lines of code in the router.js file.

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

The only disadvantage is that there is no problem running on Android, but ios sometimes can't turn off the loading effect. At first, I thought it was a network problem, and I still couldn't switch to 4G in the background. After debugging, I found that adding a setTimeout perfectly solved the problem. The code is as follows:
import Vue from 'vue'
import Router from 'vue-router'
//loading component
import {Indicator} from 'mint-ui';

Vue.use(Router)
let spinRoute = {
    show() {//Display loading component in loading
            Indicator.open({spinnerType: 'fading-circle'});//Open the loading component. Here I use the mint UI
    },
    resolve(resolve) {//Load complete hide loading component
        return component=>{
            setTimeout(()=>{
                Indicator.close()//Close loading component
                resolve(component);
            }, 10)
        }
    }
}
export default new Router({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/home',
            name: 'home',
            component: resolve => {
                spinRoute.show();//loading on
                require(['./views/Home.vue'], spinRoute.resolve(resolve))//Route lazy load
            },
            meta: {
                title: 'home page'
            },
        },
        {
            path: '/QRcode',
            name: 'QRcode',
            component: resolve => {
                spinRoute.show();
                require(['./views/QRcode.vue'], spinRoute.resolve(resolve))
            },
            meta: {
                title: 'Game promotion'
            }
        },
        {
            path: '/NotAgent',
            name: 'NotAgent',
            component: resolve => {
                spinRoute.show();
                require(['./views/NotAgent.vue'], spinRoute.resolve(resolve))
            },
            meta: {
                title: 'Friendship tips'
            }
        },
        {path:'*',redirect:'/home'}
    ]
})

Finally, thank you for the above link Daniel to everyone's solution

Tags: Javascript Vue QRCode Android iOS

Posted on Sat, 07 Dec 2019 08:04:53 -0800 by ucffool