如何用keep-alive实现前进后退缓存、点按钮进入新页面不缓存的效果

Question

请教各位大佬如何实现这种效果：
浏览器前进后退按钮点击后可缓存（前进也缓存上一页的，后退也缓存上一页的），但点击别的按钮进入的页面统一不缓存

我试过keep-alive，这样写可缓存除了pageA,pageB以外的所有页面：

<keep-alive exclude="pageA,pageB">
  <router-view class="main" />
</keep-alive>

但是我该如何区分点击的是是浏览器的前进后退按钮，还是点击新按钮进入的呢

Answer 1

额，可以使用popState、pushState事件监听试一试。不过我们是获取的到用户完整的history的这是浏览器的自我安全限制。

Answer 2

https://cn.vuejs.org/v2/api/#...
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
好好看看文档