Tembel yüklü bir rota bileşeni yüklenirken "yükleme" animasyonu nasıl görüntülenir?

Question

Uygulamamı, webpack'in kod bölme özelliği olan birden çok parçaya böldüm, böylece kullanıcı web sayfamı ziyaret ettiğinde tüm uygulama paketi indirilemiyor.

Bazı yolların gerektirdiği parçalar çok büyük olabilir ve indirmek için kayda değer miktarda zaman alabilir. Bu, kullanıcının dahili bir bağlantıyı tıklattıklarında sayfanın aslında yüklendiğinin farkında olmaması dışında, bir şekilde bir yükleme animasyonu veya bir şey görüntülemem gerekiyor.

Yönlendiricim böyle yapılandırılır: Vue.js kılavuzunda

[ 
    { 
    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 bileşeni giderilmiş edilirken belirli bir "yükleme" bileşeni nasıl görüntüleneceğini gösterir - bu tam olarak neye ihtiyacım olduğunu, Ancak o da diyor ki: vue-yönlendirici bir rota bileşeni olarak kullanıldığında rota navigasyon gerçekleşmeden önce zaman uyumsuz bileşenler peşin çözülür, çünkü bu özellikler göz ardı edilecektir

Not söyledi.

Bunu vue yönlendiricisinde nasıl yapabilirim? Bu mümkün değilse, tembel yüklü bileşenler, kullanıcı için kötü bir deneyim sağlayacağından benim için işe yaramıyordu.

Answer 1

Sen etkinleştirmek// yükleme bileşenini gizler gösteren bir yükleme durumunu devre dışı bırakmak için navigasyon korumaları kullanabilirsiniz: "nprogress" gibi bir şey kullanmak istiyorsanız

bunu şöyle yapabiliriz:

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

const router = new VueRouter({ 
    routes 
}) 

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

Alternatif olarak, yerinde someting göstermek istiyorsanız:

http://jsfiddle.net/h4x8ebye/1/ Sonra şablonda

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() 
}) 

: Ayrıca kolayca yükleme durumu için $ kök bileşeni kullanmak yerine bir çok küçük bileşeninde encasulated olabilir

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

.