如何保存页面的当前状态

如何保存页面的当前状态:
  既然是要保存页面的当前状态 (其实也就是组件的状态),  那么会出现以后一下两种情况:
  1: 前组件会被卸载
  2：前组件不会被卸载

那么就可以按照两种情况得到以下的方法:

 组件会被卸载掉:
 (1): 将状态存户到LocalStroage / SeesionStroage
 只需要在组件即将被销毁的声明周期 componentWillUnmount (React 中声明)localStorage/ 
  Sessionstorage 中把当前组件的state 通过JSON.stringify() 方法就可以存储下来了。 在这里面需要注意的是组件更新状态时机。

比如: B组件跳转到A 组件的时候， A 组件需要更新自身的状态, 但是如果从别组件跳转到B组件的时候, 实际上是希望B组件重重新渲染的， 也就是不需要从SessionStorage 中读取信息。 所以需要在Stroage 中的状态加入一个flag 属性, 用来控制A 组件是否读取Stotage 中的状态。

优点: 兼容性好, 不需要额外的库或者工具。
     简单快捷,  基本可以满足大部分需求。

缺点: 状态通过JSON 方法存储 (相当于深拷贝), 如果状态有特殊情况 （比如: Date对象等）的时候会得到字符串而不是原来的值。

   如果B 组件后退或者下一页跳转并不是前组件, 那么flag 的判断会失效, 导致从其他的页面进入A组件时  会对A 组件重新读取Storage, 会造成很奇怪的现象。

路由传值:

通过react-router 的link 组件的prop -- to 属性可以实现路由之间的传递参数的效果。
在这里用到的state 参数, 在B 组件中通过history.location.state 就可以拿到state 值, 保存他。 返回A组件时再次携带state 达到路由状态保持的效果。

优点: 简单 快捷, 不会污染LocalStorage / SessionStorage。
      可以传递 Date RegExp 等特殊的对象
----------------------------------------------------------------------------------
组件不会被卸载
 (1) 单页面渲染:
  要切换的组件作为子组件全屏渲染, 父组件正常存储页面状态。

  优点: 1:  代码量少
        2: 不需要考虑状态传递过程中错误。

 缺点: 增加A 组件维护成本
      需要传入额外的 prop 到 B 组件
      无法利用路由定位页面
 除此之外：在Vue 中还可以利用keep-alive 来缓存页面, 当组件在keep-alive 内切换是组件的 
 activated, deactivated 这这两个声明周期钩子函数被执行。

 被包裹在keep-alive 中组件种状态会被保留:
 <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>

 router.js 文件:

 {
   path: '/',
   name: 'xxx',
   component: ()=> import('../src/views/xxx.vue'),
   meta: {
     keepAlive: true  // 需要被缓存
   }
 }