Vue的SPA应用怎么保存前一个页面的缓存？

比如我从A->B->C->D页面,则路径上的A,B,C页面都被缓存了，这样当D返回的时候能直接显示前面界面的内容，而不是重新获取数据。但是当所有内容被返回以后，则A,B,C的缓存全部被释放。我知道原生的APP能通过多开页面的方式做到，但是Vue的主流是单页面应用，虽然有个keep-alive标签，能配合vue-router执行缓存操作，但是怎么去销毁缓存呢？
同时vue为了提高组件的复用性，在组件创建以后如果是同一组件跳转，该组件是不会被销毁的，这时候该怎么办？比如客户进入了某品牌的A产品详情页，然后下面有该品牌的B产品推荐，用户如果点击的话，而他们的路由都是/product/:id,只不过A是/product/A,而B是/product/B，这时候组件并没有被销毁，也就无法执行Mounted生命函数，我只有想到内容通过watch来更新，但是这样缓存也就无法生效了，那这又该怎么处理呢？