关于vue路由传参，浏览器刷新或回退导致参数丢失问题

背景：

在项目中，我们经常会遇见点击列表详情按钮，通过路由传递参数获取详情页数据的场景，每当这时就难免会遇见刷新页面或浏览器回退页面数据丢失的情况。在这里，我简单写下自己遇见这种情况是如何解决的，希望对大家有所帮助。

首先，我们来看下路由传递的几种方式：

通过query方式传参:

query传参可以理解为是ajax的get请求，参数是直接拼接在url的后面，参数是可见的，这种方式是可以解决页面刷新参数消失的问题的。

A页面：

HTML

<el-table :data="list">
    <el-table-column>
        <template slot-scope="scope">
            <el-button @click="openSample(scope.row)">Sample</el-button>
         </template>
    </el-table-column>
</el-table>

JS

openSample(val){
    this.$router.push({
        name:'B页面',
        query:{val:JSON.stringify(val)}
    })
}

B页面：

JS

    通过this.$route.query.val获取

上述方法虽然刷新参数不会丢失，但是参数会太多，地址栏会很长，并且有些项目要求不允许明文传输，所以并不推荐使用此方法。

通过params方式传参：

params传参可以理解为ajax的post请求，参数是不可见的，但是刷新会丢失，一般配合本地存储进行使用。

A页面：

HTML

<el-table :data="list">
    <el-table-column>
        <template slot-scope="scope">
            <el-button @click="openSample(scope.row)">Sample</el-button>
         </template>
    </el-table-column>
</el-table>

JS

openSample(val){
    this.$router.push({
        name:'B页面',
        params:{val:JSON.stringify(val)}
    })
}

B页面：

JS

created() {
    let rowData = sessionStorage.getItem('rowData')
    if(rowData){
        // 读取this.row数据
        this.row = JSON.parse(sessionStorage.getItem('rowData'));
    }else{
        this.row = JSON.parse(this.$route.params.val);
        // 存储this.row数据
        sessionStorage.setItem('rowData',JSON.stringify(this.row));
    }
    this.fetchData(); // 调用获取页面数据函数
},
beforeDestroy() {
    // 毁灭前移除掉，以免跳转到其他地方，sessionStorage里面依旧存储着rowData数据
    sessionStorage.removeItem('rowData')
},

一般情况下，上述方法即可解决刷新数据丢失及回退页面数据丢失等情况。如上述方法不奏效，即可使用下述方法。

A页面：

HTML

<el-table :data="list">
    <el-table-column>
        <template slot-scope="scope">
            <el-button @click="openSample(scope.row)">Sample</el-button>
         </template>
    </el-table-column>
</el-table>

JS

openSample(val){
    sessionStorage.setItem("page_a_params",JSON.stringify(val))
    this.$router.push({
        name:'B页面',
        params:{val:JSON.stringify(val)}
    })
}

B页面：

JS

created() {
    let rowData = sessionStorage.getItem('rowData')
    if(rowData){
        // 读取this.row数据
        this.row = JSON.parse(sessionStorage.getItem('rowData'));
    }else{
        const params_page_a = sessionStorage.getItem('page_a_params')
        this.row = JSON.parse(params_page_a)
        sessionStorage.setItem('rowData',params_page_a)
    }
    this.fetchData(); // 调用获取页面数据函数
},
beforeDestroy() {
    // 毁灭前移除掉，以免跳转到其他地方，sessionStorage里面依旧存储着rowData数据
    sessionStorage.removeItem('rowData')
},

我这里使用的是sessionStorage,sessionStorage在打开页面时sessionStorage里面的数据为空，如果localStorage的话会读取上一次的数据。如需多个页面使用存储的数据，则可选择localStorage，具体请结合实际业务场景分析。

Tips

• JSON.stringify()：将对象、数组转换成字符串
• JSON.parse()：将字符串转成json对象
• 创建、传参时使用JSON.stringify() (如果不使用JSON.stringify()存进去的将是[object object])
• 读取、获取时使用JSON.parse()

本文到这里就结束了，写的不好的地方，请各位大佬见谅！！！