這篇文章主要講的是路由切換的時(shí)候動(dòng)畫效果的實(shí)現(xiàn)，可以根據(jù)不同的路徑去改變動(dòng)畫的效果，以下就是源碼，可供參考：

<template>  <div id="app">    <transition :name="transitionName">    <router-view class="child-view"></router-view>   </transition>   </div> </template>  <script>  export default {  name: 'app',  data () {   return {    transitionName: 'slide-left'   }  },  mounted () {  },  //監(jiān)聽路由的路徑，可以通過不同的路徑去選擇不同的切換效果  watch: {   '$route' (to, from) {    if(to.path == '/'){     this.transitionName = 'slide-right';    }else{     this.transitionName = 'slide-left';    }   }  } } </script>  <style> .child-view {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  transition: all .5s cubic-bezier(.55,0,.1,1); } .slide-left-enter, .slide-right-leave-active {  opacity: 0;  -webkit-transform: translate(30px, 0);  transform: translate(30px, 0); } .slide-left-leave-active, .slide-right-enter {  opacity: 0;  -webkit-transform: translate(-30px, 0);  transform: translate(-30px, 0); } </style> 

路由的api鏈接在這，詳細(xì)的可以去看這https://router.vuejs.org/zh-cn/advanced/transitions.html

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。