Vue.js頁面轉換淡入淡出效果與vue路由器

Question

如何實現在vue-router定義的頁面（組件）之間的淡入淡出效果頁面轉換？

Answer 1

裹<router-view></router-view>與<transition name="fade"></transition>並添加這些樣式：

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

詳細的解答

假設你已經與VUE CLI，如創建應用程序：

vue init webpack fadetransition 
cd fadetransition 
npm install 

安裝路由器：

npm i vue-router 

如果不開發利用VUE-CLI您的應用程序，請務必添加VUE路由器的標準方式：

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

可以使用例如：https://unpkg.com/vue-router/dist/vue-router.js

的CLI創造了一個骨幹應用程序，您可以添加組件。

1）創建頁面組件

在Vue的，部件（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> 

2）設置路由

編輯生成src/main.js添加所需的進口：

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>標記中。

整個src/App.vue示例在答案的最後。

4）添加淡入淡出過渡效果的頁面組件

裹的<router-view></router-view>與<transition name="fade">元素，如：

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

Vue公司將在這裏做的工作：它會創建並插入相應的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，它會自動顯示頁面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：

<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 /頁/第1頁。 vue：

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