Vue开发中子页面跳转回主页时保存主页查询条件的处理方法

在Vue的实际开发过程中，出现了这种需求:

主页form查找数据，查找完成用户跳转到详情页，之后返回主页后保存查询条件

对于不同的情况，可以采用不同的方法。

写在同一个文件，通过v-if, v-show控制显隐

将主页面和详情页写在同一个文件里其实相当于一个主页数据和详情页数据在一个页面上，只是显示和隐藏的区别，属于同一个DOM树。注意点在于数据和函数命名在同一文件内不能重名。

通过本地存储来储存主页查询条件

正常进行路由跳转，查询条件由本地储存来保存。

window.localStorage - 存储没有截止日期的数据
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;
//删除
localStorage.removeItem("lastname");
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

本地储存的局限性

• localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
• 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
• localStorage在浏览器的隐私模式下面是不可读取的
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

将子页面作为组件引用的主页面

页面已开发完，父子页面文件如果要合并不仅要浪费大量的开发成本，而且还会有很大的风险，这种情况下，将子页面作为父页面的组件引用是很合适的方法。
1.将整个子页面作为组件注册声明在主页面。

import sonPage from '...'

export default{
  components: { sonPage } 
}

2.在页面中引入组件实例，设置属性

<section v-if="checkDetailPage">
    <checkDetailPage
            :id="qualityId"
            :qualityType="'10'"
            :recheckId="recheckId"
            :checkStatus="tabName"
            @backSearchPage="backSearchPage($event)"
    >
    </checkDetailPage>
</section>

3.子页面（组件）prop并使用父子组件通信传值