快捷导航(标签栏导航)

基本支撑： 运用 keep-alive 和 router-view 的结合。
代码: @/layout/components/AppMain.vue

<keep-alive :include="cachedViews">
  <router-view></router-view>
</keep-alive>

缓存页面存在store.state.tagsView.cachedViews

顶部标签栏导航实际作用相当于 nav 的另一种展现形式，其实说白了都是一个个 router-link，点击跳转到相应的页面。然后我们再来监听路由 $route 的变化，来判断当前页面是否需要重新加载或者已被缓存

目前 tags-view 维护了两个数组。
visitedViews : 用户访问过的页面 就是标签栏导航显示的一个个 tag 数组集合
cachedViews : 实际 keep-alive 的路由。可以在配置路由的时候通过 meta.noCache 来设置是否需要缓存这个路由 默认都缓存

include 默认是优先匹配组件的 name
路由配置中的name 要和 组件返回出的name保持一致
一定要保证两者的名字相同，切记写重或者写错。默认如果不写 name 就不会被缓存

缓存不适合场景

文章详情页，/article/1 /article/2，使用的同一个组件，name一致，缓存就会出错
如果想缓存详情页面处理方案
1、 不使用 keep-alive 的 include 功能 ，直接是用 keep-alive 缓存所有组件，这样子是支持前面所说的业务情况的。当然直接使用 keep-alive 也是有弊端的，他并不能动态的删除缓存，你最多只能帮它设置一个最大缓存实例的个数 limit。
2、使用 localStorage 等浏览器缓存方案，自己进行缓存处理

Affix 固钉

每条路由中meta中设置affix: true，tag是不能删除的 ，没有x
如果没有标签导航栏需求的用户，建议移除此功能，AppMain删除keep-alive 再删除相关代码