在保存数据之后，不知道什么时候清空数据，不如试试beforeRouteEnter

Posted 2020-12-23 纯白棒球帽

一个需求是在a页面里边进行查询一个表格，查出后可以点击任意一条数据进行跳转别的页面进行操作，在操作完成以后再跳回a页面时，要呈现出跳转之前的a页面中那些查询的数据

项目里边是直接用的本地存储，在点击跳转的时候进行存储

 // 存
edit () {
      let a = {
         name:‘zhang‘,
         age:‘18‘
      }
      sessionStorage.setItem(‘session‘, JSON.stringify(a))
    }

// 取
created() {
  sessionStorage.getItem(‘session‘)
  ...进行你想要的赋值
   //赋值结束后进行销毁
　sessionStorage.removeItem(‘sessionDetailWeb‘)

}

这样看着是没没有什么问题，但程序员永远不知道用户是怎么使用你的产品的，突然发现一种情况，a页面->b页面（此时已经存本地了，按理来说，用户在b页面操作完，就跳转到a页面，我正常取值，销毁，按剧本一步一步来），但是，凡事都有个但是，但是用户操作是a页面->b页面->没有操作完，通过菜单栏去了另一个页面，然而当他再次进入a页面的时候，应该是初始状态。这，，，，，

所以就用到了beforeRouteEnter 路由守卫

在a页面

 beforeRouteEnter(to, from, next) {
    if (
      from.name != ‘edit‘  && sessionStorage.getItem(‘session‘)
    ) {
      sessionStorage.removeItem(‘session‘)
    }
    next()
  }

也就是当跳转到a页面的时候，首先判断下是不是b页面跳转的，如果不是，那就把本地的储存销毁，当然 如果公共的地方比较多，也可在router.js里边使用beforeEach来统一控制