Vue.js переход к эффекту перехода страницы с vue-router

Question

Как добиться перехода страницы с эффектом затухания между определенными страницами (компонентами) vue-router?

Answer 1

Wrap <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 init webpack fadetransition 
cd fadetransition 
npm install 

Установить маршрутизатор:

npm i vue-router 

Если вы не разрабатываете приложение с помощью VUE-консоль, убедитесь, что добавить 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, компоненты (элементы пользовательского интерфейса) могут быть вложенными. Страница в вашем приложении может быть сделана с помощью обычного компонента 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, он автоматически отображает страницу с эффектом затухания. Если вы переписываете 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 класс в случае, если они активны, но вы также можете задать пользовательские классы, если вы используя, например, 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> 

Файлы для справки

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>