Vue.js sayfa geçişi azaltma efekti ile vue yönlendirici

Question

Vue yönlendirici tanımlı sayfalar (bileşenler) arasında bir solmaya efekt sayfası geçişi nasıl elde edilir?

Answer 1

<transition name="fade"></transition> ile Wrap <router-view></router-view> ve eklemek bu stilleri:

vue init webpack fadetransition 
cd fadetransition 
npm install 

yükleyin: Eğer vue-cli, örneğin ile başvurunuzu oluşturduk varsayarsak

.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 

Detaylı cevap

yönlendirici:

npm i vue-router 

Eğer vue-cli kullanarak uygulama geliştirme değilseniz, vue router gibi standart bir yol eklemek için emin olun: https://unpkg.com/vue-router/dist/vue-router.js CLI yarattı

a:

<script src="/path/to/vue.js"></script> 
<script src="/path/to/vue-router.js"></script> 

Sen mesela kullanabilirsiniz bileşenleri ekleyebileceğiniz, sizin için omurga uygulaması.

1) oluştur sayfası bileşenleri Vue yılında

, bileşenler (UI öğeleri) iç içe olabilir. Uygulamanızdaki bir sayfa, söz konusu sayfadaki diğer bileşenlerin kökü olarak kabul edilen normal bir Vue bileşeniyle yapılabilir.

src/ adresine gidin ve pages/ dizinini oluşturun. Bu sayfa-kök bileşenleri (tek tek sayfalar) bu dizine koyulurken, gerçek sayfalarda kullanılan diğer bileşenler hazır components/ dizinine yerleştirilebilir.

Başlatıcılar için src/pages/Page1.vue ve src/pages/Page2.vue adlı dosyalarda iki sayfa oluşturun. Onların içeriği (sırasıyla düzenleme sayfa numaraları) olacaktır:

<template> 
    <h1>Page 1</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

Edit oluşturulan src/main.js eklemek gerekli ithalat yönlendirme 2) Kurulum:

import VueRouter from 'vue-router' 
import Page1 from './pages/Page1' 
import Page2 from './pages/Page2' 

küresel yönlendirici kullanımını ekleyin:

Vue.use(VueRouter) 

bir yönlendirici kurulum ekleyin:

const router = new VueRouter({ 
    routes: [ 
    { path: '/page1', component: Page1 }, 
    { path: '/page2', component: Page2 }, 
    { path: '/', redirect: '/page1' } 
    ] 
}) 

son rota sadece başlangıç ​​patikayı /page1 için / yönlendirir. Uygulama başlatma düzenleme:

new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
}) 

bütün src/main.js örneğin yanıt sonunda.

3) bir yönlendirici Arkadan görünüş

Yönlendirme artık kurulduğundan, sayfa bileşenleri yönlendirici eksik göre işlenecek sadece bir yer ekleyin. Bu, şablonları bir yere <router-view></router-view> yerleştirerek yapılır, src/App.vue'un <template> etiketine koymak isteyeceksiniz.

src/App.vue örneğinin tamamı yanıtın sonundadır.

4) örneğin bir <transition name="fade"> eleman ile sayfa bileşenleri

Wrap arasında <router-view></router-view> solma geçiş efekti ekleyin:

<template> 
    <div id="app"> 
    <transition name="fade"> 
     <router-view></router-view> 
    </transition> 
    </div> 
</template> 

Vue burada iş yapacak: oluşturmak ve uygun CSS ekleyecektir Etki süresi boyunca belirtilen isimle başlayan sınıflar, örn .: .fade-enter-active. Şimdi App.vue bölümünün etkilerini tanımlayın:

<style> 
.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 
</style> 

İşte bu kadar. Uygulamayı şimdi çalıştırırsanız, ör. npm run dev ile, otomatik olarak Page 1 fade-in efektini gösterir. URL'yi/page2 olarak yeniden yazarsanız, sayfalar soluk ve soluk görünen efektlerle değiştirilir.

Daha fazla bilgi için routing ve transitions belgelerine göz atın.

5) İsteğe bağlı: Sayfalara bağlantılar ekleyin.

Sen mesela, <router-link> bileşeni ile belirli sayfalara bağlantılar ekleyebilirsiniz:

<router-link to="/page1">Page 1</router-link> 
<router-link to="/page2">Page 2</router-link> 

Bu otomatik bağlantılar etkin oldukları durumda router-link-active sınıf verir, ama eğer sen de özel sınıflar belirtebilirsiniz örneğin kullanarak Önyükleme:

başvuru için Dosyalar

<router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link> 
<router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link> 

src/main.js:

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import VueRouter from 'vue-router' 

import App from './App' 
import Page1 from './pages/Page1' 
import Page2 from './pages/Page2' 

Vue.use(VueRouter) 

const router = new VueRouter({ 
    routes: [ 
    { path: '/page1', component: Page1 }, 
    { path: '/page2', component: Page2 }, 
    { path: '/', redirect: '/page1' } 
    ] 
}) 

/* eslint-disable no-new */ 
new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
}) 

src/App.vue: Page1

<template> 
    <div id="app"> 
    <router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link> 
    <router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link> 
    <transition name="fade"> 
     <router-view></router-view> 
    </transition> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app' 
} 
</script> 

<style> 
.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 
</style> 

src/sayfalar /. vue:

<template> 
    <h1>Page 1</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

src/sayfalar/Page2.vue:

<template> 
    <h1>Page 2</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style>