Efekt przejścia efektu strony Vue.js z vue-routerem

Question

Jak uzyskać efekt przejścia między stronami vue-routera (komponenty)?

Answer 1

Wrap <router-view></router-view> z <transition name="fade"></transition> i dodać te 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 
} 

szczegółową odpowiedź

utworzeniu aplikacji z vue-cli, np Zakładając:

vue init webpack fadetransition 
cd fadetransition 
npm install 

Instalacja router:

npm i vue-router 

Jeśli nie rozwijają swoją aplikację za pomocą vue-cli, upewnij się, aby dodać router Vue standardowy sposób:

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

można użyć np: https://unpkg.com/vue-router/dist/vue-router.js

CLI stworzył aplikacja szkieletowa, do której możesz dodać komponenty.

1) Tworzenie stron elementy

W Vue, składniki (elementy interfejsu użytkownika) mogą być zagnieżdżone. Stronę w aplikacji można utworzyć za pomocą zwykłego komponentu Vue, który jest uważany za główny dla innych składników na tej stronie.

Przejdź do src/ i utwórz katalog pages/. Te składniki katalogu głównego (poszczególne strony) zostaną umieszczone w tym katalogu, podczas gdy pozostałe komponenty użyte w rzeczywistych stronach mogą zostać umieszczone w gotowym katalogu components/.

Utwórz dwie strony w plikach o nazwie src/pages/Page1.vue i src/pages/Page2.vue na początek. Ich zawartość będzie (Edytuj stronę numery odpowiednio):

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

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

2) Konfiguracja routingu

edytować generowane src/main.js dodać wymagane Import:

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

Dodaj globalnego wykorzystania routera:

Vue.use(VueRouter) 

Dodaj konfigurację routera:

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

Ostatnia trasa tylko przekierowuje początkowej ścieżka / do /page1. Edytować aplikacji inicjacji:

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

Cały src/main.js przykładem jest na końcu odpowiedzi.

3) dodać widok Router

Routing jest ustanowiony przez teraz, po prostu miejsce, w którym elementy strony będą renderowane zgodnie router brakuje. Odbywa się to poprzez umieszczenie <router-view></router-view> gdzieś w szablonach, będziesz chciał umieścić go w tagu src/App.vue '<template>.

Cały przykład src/App.vue znajduje się na końcu odpowiedzi.

4) Dodaj efekt przejścia Fade między komponentami stronie

zawinąć <router-view></router-view> z elementem <transition name="fade">, np:

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

Vue będzie wykonać zadanie tutaj: będzie utworzyć i wstawić odpowiedni CSS klasy zaczynające się od nazwy określonej przez cały czas trwania efektu, np .: .fade-enter-active. Teraz określić zmiany w sekcji App.vue za:

<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> 

to wszystko. Jeśli teraz uruchomisz aplikację, np. z npm run dev, automatycznie wyświetli Stronę 1 z efektem wejścia. Jeśli przepisujesz adres URL na/page2, zmieni on strony z efektami zanikania i zanikania. Aby uzyskać więcej informacji, należy zapoznać się z dokumentacją pod numerami routing i transitions.

5) Opcjonalnie: Dodaj linki do stron.

można dodawać linki do poszczególnych stron ze składnikiem <router-link>, np:

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

To automatycznie daje powiązań z router-link-active klasy w przypadku są one aktywne, ale można również określić klas niestandardowych, jeśli jesteś używając np Bootstrap:

<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> 

pliki do odniesienia

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:

<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/pages/STR.1. vue:

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

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

src/pages/Page2.vue:

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

<script> 
export default { 
} 
</script> 

<style scoped> 
</style>