Ответ 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 компоненты (элементы пользовательского интерфейса) могут быть вложенными. Страница в вашем приложении может быть выполнена с помощью обычного компонента 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-адрес на страницу /page 2, он будет переключать страницы с эффектами постепенного исчезновения и затухания.
Ознакомьтесь с документацией по маршрутизации и transitions для получения дополнительной информации.
5) Дополнительно: добавьте ссылки на страницы.
Вы можете добавлять ссылки на определенные страницы с помощью компонента <router-link>, например:
<router-link to="/page1">Page 1</router-link>
<router-link to="/page2">Page 2</router-link>
Это автоматически дает ссылки a router-link-active class, если они активны, но вы также можете указать пользовательские классы, если вы используете, например. 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)
})
ЦСИ/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/страницы/Page1.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>