由于VueRouter官方文档过于抽象，确实难以理解，所以我总结一下如何更简单的理解路由跳转的动画。先看看官方对这个概念的解释。刚开始学习的时候，看到黄色方框里的内容，我傻眼了。我从未见过:is命令。不知道这个地方是固定的写法还是让我们自己写组件？1.: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、你的组件的切换其实是显示在组件中的，每个组件都是独立的。4、所以这里的和我们一开始写的text.vue组件的原理是完全一样的。Tips：希望大家细细品味我上面写的四项3.准备三个伪页面1.这里我想用实际的页面来展示路由跳转的动画，但是我们今天的主题不是页面效果，所以这里我选择截图三个微信页面来完成今天要讲的核心内容。2、我翻译了文件名，发现个人主页、索引朋友圈是我们常用的三个页面。3.结构也很简单三个文件，然后把所有的组件放到router组件中（这里我们使用vue-router4）4.三个组件的结构如下，大概意思就是点击图片路由到跳转到其他页面，这里我直接用图片作为跳转的标签，为了方便没有设计按钮。四、开始设计动画效果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%自宽到页面上呈现我用了2秒。ease这个词的意思是软的，这里我们不要太多。复述CSS3的知识，可以自己去MDN复习一下。万事俱备，唯独机会来了。这里只需要在App组件的router-view标签中包裹一层transition标签即可。name属性的值就是我们下面保留的fang-enter-from。mode='out-in'其实是out和in两个词的组合，代表的是过渡模式，mode="out-in"表示这个组件先淡出再让下一个组件进入。这个顺序很重要！！！如果设置了mode="in-out"，则表示下一个组件先进入页面，然后当前组件退出。这样会造成页面上同时出现两个组件的效果，这不是我们想要的。
最终效果如下，主体效果已经完成。以后学习如何录制gif图片。本次提到的跳转效果是所有页面通用的跳转效果，下次我会讲解如何为两个组件设置单独的挑战效果。例如：在进入朋友圈的页面从右滑，从朋友圈返回时发现效果是从左滑
