因为VueRouter官网文档写的太过形象，真的特地不好了解，所以我来总结一下如何去更简略地了解路由跳转时的动画。
首先看一下官网对于这个概念的解释。
在刚开始学习的时候，看到黄色框框里内容间接傻眼，从未见过:is这个指令。不晓得这个中央到底是固定写法还是让咱们写本人的组件？
一.:is指令是什么意思？
1.在这里筹备两个文件来演示这个指令的作用。
2.button.vue构造也很简略
就是一个按钮组件
text.vue里并没有本人的组件，而是应用了component这个标签来显示出MyButton这个组件。
3.props也是能够失常传递的
4.这样text.vue这个组件本身就相当于MyButton这个组件，你可能会好奇，这有什么用呢？
5.如果咱们像上面这样写，我再引入一个组件，而后定义一个变量isChange，于是咱们就能够动静的管制这个组件到底展现哪一个组件了。
让咱们看看页面
点击按钮切换
6.写到这里，忽然感觉怎么像路由呢？路由不就是来实现这事的吗？那我既然能够这样实现伪路由的性能，那我大费周折用VueRouter干啥啊？
如果你能想到这里，不得不抵赖，你很棒！然而你有没有想过一个问题，你的url地址永远不会变，history对象你也没方法调用，你无奈实现页面回退，后退的性能。
二.搭配v-slot实现组件跳转动画的筹备工作
1.要看明确这里，你必须晓得v-slot的概念，这个我之前的文章里有写，这里不过多赘述
2.下一步你须要了解的就是，咱们的页面其实是一个单组件页面，也就是所有你看到的页面，都是一个.vue文件。
3.你组件的切换其实都是在<router-view>这个组件内展现的，每个组件都是独立的。
4.所以这里的<component :is="xxx" >就和咱们最开始写的text.vue组件是截然不同的原理。
tips：心愿你能够细细品味我下面写的四条内容
三.筹备三个伪页面
1.这里我想用理论的页面来展现路由跳转的动画，然而咱们明天的主题并不是页面成果，所以这里我抉择了截图三个微信页面，来实现明天要讲的核心内容。
2.文件名字我翻译一下发现,个人主页,index 朋友圈，就是咱们罕用的这三个页面。
3.构造也是很简略的三个文件，而后把组件全副放进router组件里（这里咱们用的是vue-router4）
4.三个组件构造如下,大略意思就是点击图片路由跳转到其余页面,我这里间接将图片作为跳转的<link>标签了，为了不便就不设计按钮了。
四.开始设计动画成果
1.联合下面的常识，咱们的App.vue主页设计为了如下
2.这里咱们先探讨假如所有组件都利用对立的适度动画。
3.要想有动画成果，你首先须要确定
这个组件最开始的状态是如何？最终的状态如何，
这句话怎么了解呢？学到这里，我置信你对组件的生命周期曾经有了很好的意识，其实这两个状态就好似对应组件的onBeforeMount和onMounted这两个机会。
4.间接实战解说吧：vue里提供了这几个阶段的类名，须要搭配css应用。咱们一个一个讲。
1.首先是v-enter-from（后面的v能够自定义名称，这里我写的是本人的名字，前面须要用到这个）
这个具体到页面是什么意思呢？其实非常简单，就好比下图，组件挂载前的地位，处于App组件的X轴的负本身宽度的100%
- 挂载前的地位咱们设置好了，那么接下来就是这个组件挂载后的地位在哪里出现呢？
须要这个v-enter-to
出现到页面如下成果
- 持续思考，组件挂载前后的地位咱们确定了，那么它两头的过程，心愿它是多少秒实现？什么样的形式实现？如同咱们还没确认。这里须要这个
v-enter-active类名
具体到页面上的成果就是，我从X轴的-100%本身宽度，到出现到页面上破费了2s，ease单词是柔和的意思，在这里咱们不过多赘述CSS3的常识，本人能够去MDN上温习。
- 万事俱备，只欠东风。这里只须要在
App组件的router-view标签内包裹一层transition标签即可。
name属性的值就是咱们在上面预留的fang-enter-from的fang，mode='out-in'其实是out和in两个单词的组合，这里代表着过渡的模式，mode="out-in"的意思是，组件先淡出，才容许下一个组件进入，这个先后顺序十分重要！！！如果设置mode="in-out"代表着下一个组件先进入页面，而后以后的组件才退出去，这样会造成页面同时存在两个组件的成果，并不是咱们想要的。
<hr/>
最终成果如下，次要成果曾经实现。当前会学习一下如何录制gif图的。
这次讲的跳转成果是所有页面的通用适度，下次会解说如何给两个组件设置独自的挑战成果。
如：在发现进入朋友圈页面上从左边划过，而从朋友圈返回时，发现是从右边滑动的成果