VUE刷新页面丢失数据的问题总结修复

VUE页面刷新后丢失路由数据问题总结

问题描述

VUE页面通信，需要传入一个流程名称字段，用来过滤子页面展示内容范围。

第一次跳转，字段正确保存。

在当前子页面按F5刷新，由于原路由信息未保存，导致字段丢失。
为了解决路由信息丢失的问题，可以把要保存的数据在第一次跳转时本地保存。

使用localStorage本地保存数据

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的用法需要博文都有记载，不多赘述，直接贴上我的使用代码（代码只是实现功能，尚未悉心优化）。

当路由数据不为空时，用路由信息更新本地信息，否则用本地存储数据为临时变量赋值。