切换标签页通过sessionStorage缓存页面以及解决同一个页面不同路由页面跳转不刷新问题

现在有一个需求，xx页面新增、编辑、查看详情跳转到另外一个标签页，新增、编辑、详情页面是同一个页面，但是不同路由。现在测试提出，当在新增编辑详情页点击取消或者保存等按钮时，关闭该标签页；在该页面填写信息是，切换至别的标签页，则缓存该页面已输入的信息。

说一下思路：

当在当前页面点击新增或者编辑按钮的时候，通过sessionStorage分别设置一个值为null。

跳转到对应页面后，判断对应的值是否为null，如果为null，则编辑页面发请求，获取页面数据，新增页面初始化；如果不为空，则直接使用sessionStorage存储的对应的值。

在离开该页面的时候，通过beforeRouteLeave给sessionStorage之前设置的值赋值。

具体实现：

在点击按钮页面

<Button class="mar8" icon="md-add" @click="jump('add')">新增</Button>

jump(type,row){
   if(type == 'add'){
       sessionStorage.setItem('addValue',null)
   }else if(type == 'edit'){
       sessionStorage.setItem('editValue',null)
   }
｝

在新增编辑页面： 

1、初始化数据

mounted(){
   this.getStorage(this.$route.name)
},

getStorage(name){  // name为路由名称=> this.route.name
   // 先判断是编辑还是新增
   if(name == 'add'){
      if(sessionStorage.getItem('addValue') != 'null'){  //判断该值是否为null
         this.detailForm = JSON.parse(sessionStorage.getItem('addValue'))
         this.detailForm.areaId = JSON.parse(sessionStorage.getItem('addValue')).areaId
      }else{
         this.getDeatail('info-add')
      }
   }else if(name == 'edit'){
       if(sessionStorage.getItem('editValue') != 'null'){  //判断该值是否为null
          this.detailForm = JSON.parse(sessionStorage.getItem('editValue'))
          this.detailForm.areaId = JSON.parse(sessionStorage.getItem('editValue')).areaId
        }else{
          this.getDeatail('info-edit')
        }
      }
     
    },

getDeatail(name){
    // 通过名称判断是新增还是编辑
    // 获取编辑页面数据以及初始化新增页面的具体操作
    // ...
}

2、离开时操作

beforeRouteLeave (to, from, next) {
    if(from.name.includes('add')){
      // sessionStorage存储对象时，得转成json格式！！
      sessionStorage.setItem('addValue',JSON.stringify(this.detailForm))
    }
    if(from.name.includes('edit')){
      sessionStorage.setItem('editValue',JSON.stringify(this.detailForm))
    }
    next()
 },

至此测试新增、编辑页面是可以缓存已输入数据的，但是发现一个问题：

当编辑和新增页面都打开时，从编辑页面跳转到新增页面，或者从新增页面跳转到编辑页面时，新增页面会被编辑页面的数据覆盖，或者编辑页面被新增页面覆盖。两个路由复用同一个界面相互跳转时界面数据被保留，没有刷新还是之前的页面对象。

前面提到，新增和编辑页面是同一个页面，但是不同路由。出现此现象是因为vue路由机制：不同的路由vue会刷新并跳转到相应路由，但如果是下一个点击触发的还是当前路由则当前路由页面不会被刷新。即不会执行created、mounted函数。

解决方法：

监听路由

watch:{
    '$route'(to,from){
      this.getStorage(to.name)
    },
｝

有问题欢迎指出~