Vue.efecto de desvanecimiento de transición de página js con vue-router

Envuelva <router-view></router-view> con <transition name="fade"></transition> y agregue estos estilos:

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

Respuesta Detallada

Suponiendo que haya creado su aplicación con vue-cli, por ejemplo:

vue init webpack fadetransition
cd fadetransition
npm install

Instale el router:

npm i vue-router

Si no está desarrollando su aplicación utilizando vue-cli, asegúrese de agregar el enrutador vue de la manera estándar:

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

Puede usar por ejemplo: https://unpkg.com/vue-router/dist/vue-router.js

La CLI ha creado una aplicación troncal para usted, a la que puede agregar componentes.

1) Crear componentes de página

En Vue, los componentes (elementos de la interfaz de usuario) pueden anidarse. Una página de tu app se puede crear con un componente Vue normal que se considere la raíz de otros componentes de esa página.

Vaya a src/ y cree el directorio pages/. Estos componentes de la raíz de página (páginas individuales) se pondrán en este directorio, mientras que los otros componentes utilizados en las páginas reales se pueden poner en el ready-made components/ directorio.

Crea dos páginas en archivos llamados src/pages/Page1.vue y src/pages/Page2.vue para empezar. Su contenido será (editar números de página respectivamente):

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

<script>
export default {
}
</script>

<style scoped>
</style>

2) Configurar enrutamiento

Editar el generado src/main.js añadir las importaciones necesarias:

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

Agregue un uso global de enrutador:

Vue.use(VueRouter)

Añadir una configuración de router:

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

La última ruta simplemente redirige la ruta inicial / a /page1. Editar la iniciación de la aplicación:

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

Todo src/main.js el ejemplo está al final de la respuesta.

3) Añadir una vista de router

El enrutamiento ya está configurado, solo falta un lugar donde los componentes de la página se representarán de acuerdo con el enrutador. Esto se hace colocando <router-view></router-view> en algún lugar de las plantillas, querrá ponerlo en la etiqueta src/App.vue's <template>.

El ejemplo completo src/App.vue está al final de la respuesta.

4) Agregar efecto de transición de fundido entre componentes de página

Envuelva el <router-view></router-view> con un elemento <transition name="fade">, por ejemplo:

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

Vue hará el trabajo aquí: creará e insertará las clases CSS apropiadas comenzando con el nombre especificado a lo largo de la duración del efecto, por ejemplo: .fade-enter-active. Ahora defina los efectos en la aplicación.sección de 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>

Eso es todo. Si ejecuta la aplicación ahora, por ejemplo, con npm run dev, mostrará automáticamente la página 1 con un efecto de fundido. Si reescribe la URL a / page2, cambiará las páginas con fade-out y fade-in effects.

Consulte la documentación sobre routingy transitions para obtener más información.

5) Opcional: Añadir enlaces a páginas.

Puede agregar enlaces a páginas particulares con el componente <router-link>, por ejemplo:

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

Esto automáticamente da a los enlaces una clase router-link-active en caso de que estén activos, pero también puede especificar clases personalizadas si está utilizando, por ejemplo, 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>

Archivos para referencia

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/Page1.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>