使用 keep-alive 的 include 和 exclude 无效的一点注意

最近在使用vue + element-UI开发的后台管理项目中，优化 keep-alive 的使用方式时遇到了一些问题

优化前使用的 if 判断来控制页面是否可以缓存，这样做页面切换的动画效果不是太理想

优化想使用 include 来控制页面是否可以缓存，也可以让页面切换起来更流畅些

路由里面

export default new Router({
  routes: [
    {
      path: '/a',
      name: 'a',
      component: () => import('src/views/a'),
      meta: { keepAlive: true }
    },
    {
      path: '/b',
      name: 'a',
      component: () => import('src/views/b'),
      meta: { keepAlive: true }
    }
  ]
})

此时，我感觉准备工作已经做完了，可以运行项目看一下效果了。果然，切换动画是有了，但是查看控制台，页面竟然没有了请求！

使用 keep-alive 页面的请求我是放在 activated 里面的，此时页面完全没有执行这里面的代码

我仔细检查了代码，确保没有遗漏什么东西，但问题始终没有解决

我去看了vue 官方文档 api keep-alive，检测了 vue 版本大于文档说的 2.1.0，然后发现了这句话：

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

当时以为是路由里面那个 name，然后又检查了所有路由的 name 属性，发现也没遗漏

最后搜到了思否的一个问答vue.js的keep-alive include无效，发现原来是要在组件页面中声明 name 属性

  

    ...
  

最终页面终于可以正常运行了

也在此做一下笔记，记录一下遇到的问题