Vue.js vue-router에서의 페이지 전환 효과 감소

Question

vue-router 정의 페이지 (구성 요소) 간의 페이드 효과 페이지 전환 방법은 무엇입니까?

Answer 1

<transition name="fade"></transition>와 랩 <router-view></router-view> 및 추가 이러한 스타일 :

vue init webpack fadetransition 
cd fadetransition 
npm install 

를 설치하면 VUE-CLI 예와 응용 프로그램을 만든 가정

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

자세한 답변을

라우터 :

npm i vue-router 

당신이 VUE-CLI를 사용하여 응용 프로그램을 개발하지 않으면, VUE 라우터를 표준 방식으로 추가해야합니다 : https://unpkg.com/vue-router/dist/vue-router.js CLI는 만들었습니다

A :

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

당신은 예를 사용할 수 있습니다 백본 응용 프로그램으로 구성 요소를 추가 할 수 있습니다.

1) 작성 페이지 성분 뷰에서

부품 (UI 요소)는 중첩 될 수있다. 해당 페이지의 다른 구성 요소에 대한 루트로 간주되는 일반적인 Vue 구성 요소로 앱의 페이지를 만들 수 있습니다.

src/으로 이동하여 pages/ 디렉토리를 생성하십시오. 이 페이지 루트 구성 요소 (개별 페이지)는이 디렉토리에 저장되며 실제 페이지에 사용 된 다른 구성 요소는 기성품 인 components/ 디렉토리에 저장할 수 있습니다.

우선 src/pages/Page1.vue 및 src/pages/Page2.vue 파일에 두 페이지를 만듭니다. 그 내용은 (각각 편집 페이지 번호)입니다 :

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

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

편집 생성 된 src/main.js 추가 필요한 수입을 라우팅 2) 설정 :

import VueRouter from 'vue-router' 
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' } 
    ] 
}) 

마지막 경로는 초기 경로를 /page1에 /를 리디렉션합니다. 응용 프로그램의 시작을 편집

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

전체 src/main.js 예는 대답의 끝입니다.

3) 라우터보기

라우팅 지금 설정을 페이지 성분 라우터 누락에 따른 렌더링되는 단지 장소 추가. 이것은 <router-view></router-view>을 템플릿의 어딘가에 배치하여 이루어 지므로 src/App.vue의 <template> 태그에 넣을 수 있습니다.

전체 예제는 답변 끝에 있습니다.

4) 예를 들면, <transition name="fade"> 요소와 페이지 구성 요소

랩 사이의 <router-view></router-view>을 페이드 전환 효과를 추가

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

뷰는 여기에 일을 할 것입니다 : 그것은 만들고 적절한 CSS를 삽입합니다 효과의 지속 시간을 통해 지정된 이름으로 시작하는 클래스 (예 : .fade-enter-active). 이제 App.vue 섹션에서 효과를 정의하십시오.

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

그게 전부입니다. 앱을 지금 실행하면 (예 : npm run dev으로 페이드 인 효과가있는 Page 1이 자동으로 표시됩니다. URL을/page2로 다시 작성하면 페이드 아웃 효과와 페이드 인 효과가있는 페이지가 전환됩니다.

자세한 내용은 routing 및 transitions의 설명서를 확인하십시오.

5) 선택 사항 : 페이지에 링크를 추가하십시오.

당신은 예를 들어, <router-link> 구성 요소와 특정 페이지에 대한 링크를 추가 할 수 있습니다

이

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

이 자동으로 링크를가 활성화 된 경우에 router-link-active 클래스를 제공하지만, 당신이 경우 당신은 또한 사용자 정의 클래스를 지정할 수 있습니다 예를 들면 부트 스트랩 :

참조 파일

<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 : 페이지 1

<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는/페이지 /. 시각 :

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

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

SRC/페이지/Page2.vue :

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

<script> 
export default { 
} 
</script> 

<style scoped> 
</style>