vue解决历史数据和页面刷新参数丢失问题

需求来源：

1.不用页面间传递的数据在路径中显示，所以路由跳转的时候不能通过query路径传参的方式进行

2.页面的数据刷新后数据依然要存在，所以不能简单的通过vuex存储数据，vuex存储的数据在页面强制刷新后会丢失

3.浏览器使用后退按钮的时候，之前的数据要存在，同时一个页面可能被访问多次，所以不能通过session或者local等方式

通过map的方式将页面和页面参数进行简单的绑定，因为一个页面会有多个数据状态需要维护

基本思路：

1.基于前面三点的要求，存储页面参数的时候就不能通过简单的map存储单个页面的单个数据状态，

而是通过浏览器页面存储的逻辑，也就是栈的方式进行存储。

具体步骤：

1.每个页面被访问时，将前一个页面传递过来的params参数存储下来,使用页面的路径作为key，

将传递过来的params通过JSON序列化的方式存储在一个栈中作为value

2.当页面被刷新时从栈中取出 第一个数值，不弹出，如果是从别的页面跳转过来则从栈中弹出第一个

示例代码

export default {
    data(){
        return {

        }
    },
    mounted() {
       
    },
    methods: {
        test(){
            return JSON.parse(sessionStorage.getItem(this.$route.name))
        },
        // 根据key，value入栈一个元素
        push__Data(value){
            const key = this.$route.name
            sessionStorage.setItem('__NEWEST__', this.$route.name)
            if(sessionStorage.getItem(key)){
                var tem = JSON.parse(sessionStorage.getItem(key))
                tem.push(JSON.stringify(value))
                sessionStorage.setItem(key, JSON.stringify(tem))
            }else{
                sessionStorage.setItem(key, JSON.stringify([JSON.stringify(value)]))
            }
            
        },
        // 安全地获取元素
        get__Data(){
            if(sessionStorage.getItem('__NEWEST__') == this.$route.name){
                console.log('---->  reading  <----')
                return this.read__Data()
            }else{
                console.log('---->  poping  <----')
                return this.pop__Data()
            }
        },

        // 根据key，出栈一个元素
        pop__Data(){
            const key = this.$route.name
            if(sessionStorage.getItem(key)){
                var tem = JSON.parse(sessionStorage.getItem(key))
                const value = tem.pop()
                sessionStorage.setItem(key, JSON.stringify(tem))
                return value
            }else{
                return undefined
            }
           
        },
        // 根据key,读取栈顶元素
        read__Data(){
            const key = this.$route.name
            if(sessionStorage.getItem(key)){
                var tem = JSON.parse(sessionStorage.getItem(key))
                return tem[tem.length - 1]
            }else{
                return undefined
            }
           
        },
        // 清空所有的信息
        clear__Data(){
            sessionStorage.clear();
        }
    },
    

}

实际使用

使用vue混入的方式，对每个页面的状态进行存储（保证刷新页面，数据不丢失，同时浏览器的返回上一页数据依然存在）

import persistentStorage from '@/utils/persistentStorage'
mixins:[persistentStorage], 
mounted(){
    // 获取页面传递过来的违例id，查询违例的相关信息
    if(JSON.stringify(this.$route.params) != '{}'){
      
      this.push__Data(this.$route.params)
      this.violationId = this.$route.params.##
    }else{
      const tem = this.get__Data()
      this.violationId = tem.##
    }
}