आलसी लोड किए गए रूट घटक को लोड करते समय "लोडिंग" एनीमेशन कैसे प्रदर्शित किया जाए?

Question

मैंने अपने ऐप को वेबपैक के कोड स्प्लिटिंग फीचर के साथ कई हिस्सों में विभाजित कर दिया है ताकि जब उपयोगकर्ता मेरे वेबपृष्ठ पर जाता है तो पूरा एप्लिकेशन बंडल डाउनलोड नहीं होता है।

कुछ मार्गों की आवश्यकता वाले भाग काफी बड़े हो सकते हैं और डाउनलोड करने में काफी समय लग सकते हैं। यह ठीक है, सिवाय इसके कि उपयोगकर्ता को पता नहीं है कि पृष्ठ वास्तव में लोड हो रहा है जब वे एक आंतरिक लिंक पर क्लिक करते हैं, इसलिए मुझे किसी भी तरह लोडिंग एनीमेशन या कुछ प्रदर्शित करने की आवश्यकता है।

मेरे रूटर इस तरह कॉन्फ़िगर किया गया है:

[ 
    { 
    path: '/', 
    component:() => import(/* webpackChunkName: 'landing' */ './landing.vue'), 
    }, 
    { 
    path: '/foo', 
    component:() => import(/* webpackChunkName: 'main' */ './foo.vue'), 
    }, 
    { 
    path: '/bar', 
    component:() => import(/* webpackChunkName: 'main' */ './bar.vue'), 
    }, 
] 

Advanced Async Components Vue.js गाइड में दिखाता है कि कैसे एक विशेष "लोड हो रहा" घटक प्रदर्शित करने के लिए, जबकि घटक का समाधान किया जा रहा है - यह वास्तव में मैं क्या जरूरत है, लेकिन यह भी कहते हैं:

ध्यान दें कि जब Vue रूटर में एक मार्ग घटक के रूप में इस्तेमाल किया है, इन गुणों क्योंकि async घटकों अग्रिम हल कर रहे हैं इससे पहले कि मार्ग नेविगेशन होता है नजरअंदाज कर दिया जाएगा।

मैं इसे वू-राउटर में कैसे प्राप्त कर सकता हूं? यदि यह संभव नहीं है, आलसी लोड किए गए घटक मेरे लिए काफी बेकार होंगे क्योंकि यह उपयोगकर्ता को एक खराब अनुभव प्रदान करेगा।

Answer 1

आप सक्रिय/एक लोड हो रहा है का कहना है कि पता चलता है/एक लोडिंग घटक छुपाता निष्क्रिय करने के लिए नेविगेशन गार्ड का उपयोग कर सकते हैं:

आप की तरह "Nprogress" कुछ का उपयोग करना चाहते हैं तो आप इस तरह यह कर सकते हैं:

http://jsfiddle.net/xgrjzsup/2669/

const router = new VueRouter({ 
    routes 
}) 

router.beforeEach((to, from, next) => { 
    NProgress.start() 
    next() 
}) 
router.afterEach(() => { 
    NProgress.done() 
}) 

वैकल्पिक रूप से, आप में जगह someting दिखाना चाहते हैं:

http://jsfiddle.net/h4x8ebye/1/

Vue.component('loading',{ template: '<div>Loading!</div>'}) 

const router = new VueRouter({ 
    routes 
}) 

const app = new Vue({ 
    data: { loading: false }, 
    router 
}).$mount('#app') 

router.beforeEach((to, from, next) => { 
    app.loading = true 
    next() 
}) 

router.afterEach((to, from, next) => { 
    setTimeout(() => app.loading = false, 1500) // timeout for demo purposes 
    next() 
}) 

फिर टेम्पलेट में:

<loading v-if="$root.loading"></loading> 
    <router-view v-else></router-view> 

भी आसानी से लोड हो रहा है राज्य के लिए $ जड़ घटक उपयोग करने के बजाय एक बहुत छोटे घटक में encasulated हो सकता है।