返回上一页时页面保持原状态（伪不刷新）

问题描述

点击返回按钮后，需要原页面保持不变（此处只需维持各个select和input框中的内容和分页数据即可，需要根据自身页面情况决定存储哪些内容）

主要代码

主体思路就是采用sessionStorage存储必须的选项内容，在页面跳转时存入所需内容(比如获取数据的POST方法要传的参数或之前已经得到的固定数据)，在create()时取出对应内容；

页面跳转

在页面跳转时，将需要存储的内容存入；
设置一个return的boolean变量，用于判断是否从页面返回
PS:sessionStorage不能直接存储数组和对象，需要转化为JSON，如果只是一个单独的值则可直接存取，具体方法可参照如下代码：
html部分：

        //人员类型选择器
<el-form-item label="人员类型：">
     <el-select v-model="search.stafftype_code" 
     size="medium" placeholder="全部" @change="select('type')" clearable>
            <el-option
                  v-for="item in staffTypeList"
                  :key="item.stafftype_code"
                  :label="`${item.stafftype_code} -  ${item.stafftype_name}`"
                  :value="item.stafftype_code">
            </el-option>
     </el-select>
</el-form-item>
      ...
      //分页
<el-pagination
       :page-sizes="pageSizes"
        @size-change="sizeChange"
        @current-change="currentChange"
       :page-size="pagData[0]"
       :total="pagData[2]"
       :current-page="pagData[1]"
        layout="sizes,prev, pager, next">
</el-pagination>

数据部分：

data() {
            return {
                search:{
                    stafftype_code:'',//选中的人员类型
                    dpt_code:'',//选中的部门
                    vague:'',//模糊搜索的内容
                },
                departList:[],    //部门选择列表
                pagData:[10,1,0],//分页数据 [每页大小，当前页数，总页数]
                pageSizes:[10,20,50,100],
                ...
                }
        }           

方法部分：

methods: {
            //用户信息页面跳转
            gotoDetail(row){
                let searchJson = JSON.stringify(this.search);
                let departJson = JSON.stringify(this.departList);
                let pagJson = JSON.stringify(this.pagData);
                sessionStorage.setItem('search',[searchJson]);
                sessionStorage.setItem('departList',[departJson]);
                sessionStorage.setItem('pagData',[pagJson]);
                window.location.href = './user_handle_detail.html?userId=' + row.user_id
            },

页面返回

在create()方法中判断是否为页面返回（即判断return值是否为true）
PS:由于存储时采取JSON格式，因此取出时也需要转换

created() {
            if(sessionStorage.getItem('return')!=null&&sessionStorage.getItem('return')){
                this.search = JSON.parse(sessionStorage.getItem('search'));
                this.departList = JSON.parse(sessionStorage.getItem('departList'));
                this.pagData = JSON.parse(sessionStorage.getItem('pagData'));
            }
            ...
          }

最后选取合适的位置清空所存的值（也可以不清空）;
可以直接调用 sessionStorage.clear(); 清空所有值，也可以选择调用sessionStorage.removeItem ( "key" ); 来删除名称为“ key ”的单个值信息

if(sessionStorage.getItem('return')!==null&&sessionStorage.getItem('return')){
      sessionStorage.clear();
 }

子页面（用户信息部分的跳转代码）

html部分：

<a @click="back()" class="page_back"><i class="el-icon-arrow-left" title="返回"></i>返回</a>

js部分：

back(){
     sessionStorage.setItem('return',true);
     window.location.href = 'javascript:history.back(-1)';
}