当我们从一个路由组件跳转到另一个路由组件的时候，默认是会先销毁前一个路由组件在新建后一个路由组件，每次都会触发组件的销毁和创建周期函数。
每次创建和销毁组件比较消耗资源，我们可以结合keep-alive来让路由组件进行缓存，这样切换的时候路由组件不会被销毁，只会触发组件的deactivated（隐藏）和 activated（激活）两个生命周期函数。
使用的方式是在App.vue文件中，将router-view写成keep-alive的方式：
<router-view v-slot="{Component}">
<transition>
<keep-alive>
<component :is="Component"/>
</keep-alive>
</transition>
</router-view>
上面的写法是对所有的路由组件都生效，即都使用缓存的方式。
如果我们希望只对部分组件生效，可以为keep-alive标签附上exclude="排除组件的名称1,排除组件的名称2"属性或者include="使用缓存的组件名称1,..."：
<router-view v-slot="{Component}">
<transition>
<keep-alive exclude="About">
<component :is="Component"/>
</keep-alive>
</transition>
</router-view>
结合keep-alive的路由组件我们还可以实现如下功能：
比如我们有Home组件路由有About组件路由，About组件路由下有两个Article子组件路由(传入参数不同,显示各自的文章内容)。
现在我们首先点击About路由，然后点击进入id为2的Article子路由，现在页面显示的是Article为2的文章内容。
然后我们点击回到Home路由，然后再点击进入About路由，这时候我们希望页面还是显示的之前离开时的Article为2的文章内容，即Article为2的子路由。
实现上述功能的思路是，首先使用keep-alive对路由进行缓存，再组件About的data中定义一个path变量再路由离开时（使用beforeRouterLeave路由钩子函数在路由离开时触发）保存当前的路由，由于使用了keep-alive所以这个变量在About组件再次被激活时不会被初始化，也就是能拿到上次离开这个路由时的path。然后在activated生命周期函数中使用this.$router.push(path);在组件激活时就自动跳到上次离开时的路由即可。