Enrutamiento más avanzado con Vue: transiciones mediante Vue Router

La última vez cubrimos temas avanzados.Enrutador VueTemas que discutimos sobre los protectores de navegación y redirecciones. Esta vez abordaremos cómo implementar las transiciones del enrutador Vue.

Ya lo hemos cubiertoVistaTransiciones en Comprensión de las transiciones de Vue.js, por lo que las usaremos como punto de partida. CombinandoEnrutador VuecontransicionesNos permitirá personalizar la experiencia del usuario mientras navega por nuestra aplicación con estilos o animaciones personalizadas. Esto es importante en aplicaciones que crecen con muchas rutas complejas.

Configuración

Dado que esta es otra publicación sobre temas avanzados,Enrutador VueTécnicas, supondremos que ya estás familiarizado con la configuración básica. Sin embargo, definamos un punto de partida que utilizaremos en el resto de la publicación:

# Yarn$ yarn add vue-router# or npm$ npm install vue-router --save

principal.js

import Vue from 'vue';import VueRouter from 'vue-router';import App from './App';import Swamp from './components/Swamp';import Gator from './components/Gator';Vue.use(VueRouter);const router = new VueRouter({  routes: [    { path: '/swamp', component: Swamp },    { path: '/gator', component: Gator }  ]});new Vue({  render: h = h(App),  router}).$mount('#app')

Aplicación.vue

template  div    div      router-link to="/swamp"Swamp/router-link |      router-link to="/gator"Gator/router-link    /div    hr /    div      router-view/router-view    /div  /div/templatescriptexport default { name: 'App' }/script

componentes/Swamp.vue

template  divWelcome to the Swamp!/div/templatescriptexport default { name: 'Swamp' }/script

componentes/Gator.vue

template  divHowdy, Gator!/div/templatescriptexport default { name: 'Gator' }/script

Transiciones de enrutador

ElEnrutador Vuenos permite envolver nuestro router-viewcomponente con el transitioncomponente. Esto permitetransicionesal navegar tanto hacia como desde nuestros componentes de ruta.

Aplicación.vue

template  div    div      router-link to="/swamp"Swamp/router-link |      router-link to="/gator"Gator/router-link    /div    hr /    div      transition name="slither"        router-view/router-view      /transition    /div  /div/templatescriptexport default { name: 'App' }/scriptstyle.slither-enter-active, .slither-leave-active {  transition: transform 1s;}.slither-enter, .slither-leave-to {  transform: translateX(-100%);}.slither-enter-to, .slither-leave {  transform: translateX(0);}/style

¡Ahora notarás que los componentes Gatory Swampse deslizan hacia adentro y hacia afuera desde la izquierda cuando navegas!

Transiciones dinámicas

También podemos definir transiciones de enrutador de forma dinámica. Esto nos permitiría agregar untransiciónSólo cuando se navega fuera de /swamp:

Guión: App.vue

export default {  name: 'App',  data () {    return { transitionName: null }  },  watch: {    '$route' (to, from) {      if (from.path === '/swamp') {        this.transitionName = 'drain';      } else {        this.transitionName = 'slither';      }    }  }}

Ahora definamos la draintransición:

Estilo: App.vue

.slither-enter-active, .slither-leave-active {  transition: transform 1s;}.slither-enter, .slither-leave-to {  transform: translateX(-100%);}.slither-enter-to, .slither-leave {  transform: translateX(0);}.drain-enter-active, .drain-leave-active {  transition: transform 1s;}.drain-enter, .drain-leave-to {  transform: translateY(100%);}.drain-enter-to, .drain-leave {  transform: translateY(0);}

Ahora veremos que solo al salir Swamp lo veremos drainlejos.

Transiciones por ruta

También podríamos aplicar transiciones por ruta. Podemos lograr esto envolviendo un componente de ruta con transition. Supongamos que modificamos Gatorde la siguiente manera (asegurándonos de eliminar el original transitionen App.vue):

componentes/Gator.vue

template  transition name="slither"    divHowdy, Gator!/div  /transition/templatescriptexport default { name: 'Gator' }/script

Ahora, sólo cuando naveguemos /gatorveremos nuestra slithertransición en acción.

Terminando

Enrutador VueLas transiciones son excelentes para agregar experiencias de usuario de nivel superior. No solo podemos hacer que nuestras aplicaciones se vean geniales, sino que las transiciones también pueden ayudar al usuario a navegar por una configuración de enrutador compleja. Si estuviéramos implementando un asistente o un libro, podríamos hacer que los componentes se desplacen hacia la izquierda o la derecha como si el usuario estuviera pasando las páginas. ¡Esto ayuda al usuario a recordar dónde se encuentra en su aplicación!