vue实现前进后退保持页面状态，不被刷新

需求

在当前页面进行一些操作，然后需要跳转到其他页面进行操作并取得结果，再返回到当前页面继续操作，此时需要保持当前页面不被刷新，才能继续进行操作。但是由于vue的动态组件机制，跳转页面时会销毁当前组件再创建其他页面，如果需要保存页面状态，就需要将页面缓存起来，再次进入的时候从缓存里读取即可。

实现方法

• keep-alive
  使用vue提供的抽象组件keep-alive，将需要缓存的页面包裹起来，就能实现。在App.vue文件中添加如下代码。

<keep-alive>
	<router-view />
</keep-alive>

如果想要有针对性的保存某个页面的状态，可以使用keep-alive提供的属性：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

<keep-alive include="demo1,demo2">   //缓存名称是demo1和demo2的页面，注意是组件的name属性，不是路由的
	<router-view />
</keep-alive>

<keep-alive exclude="demo1,demo2">  //不缓存名称是demo1和demo2的页面
	<router-view />
</keep-alive>

<keep-alive :max="10">  //最多缓存10个，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
	<router-view />
</keep-alive>

• activated 和 deactivated钩子函数
  虽然当前页面被缓存了，这就意味着它不会被刷新了，但是有时候我们在其他页面做了一些操作需要更新当前页面的一些数据，此时可以用到activated 这个钩子函数，它会在每次进入被缓存的页面的时候执行，需要注意的是当页面是第一次进入的时候，钩子的触发顺序created-> mounted-> activated，再次进入只会触发activated。
  deactivated钩子会在离开被缓存的页面的时候执行。