Vue中$route序列号报错怎么解决
本文小编为大家详细介绍“Vue中$route序列号报错怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中$route序列号报错怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
由于Vuex在浏览器刷新是会丢失数据,所以我在项目里使用了Vuex持久化存储的功能,我这边实现的方案是监听页面刷新的事件,将Vuex中的数据存到sessionStorage中,在页面初始化的时候再将sessionStorage中的数据设进Vuex中,具体代码如下
create(){
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store");
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
}
这样一个简单的Vuex持久化储存的功能就实现了,浏览器刷新后我们也能读取到Vuex中储存的数据,但是突然有一天,这个功能失效了,页面也没有报错,经过我的一番摸索,最终将问题锁定在了Vuex中储存的$route对象上
$Route路由对象属性
$Route对象上有以下这几个属性
-
path:字符串,对应当前路由的路径,总是解析为绝对路径,如
"/foo/bar"
params:一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象
-
query:一个 key/value 对象,表示 URL 查询参数。例如,对于路径
,则有/foo?user=1
,如果没有查询参数,则是个空对象$route.query.user == 1
-
hash:当前路由的 hash 值 (带
) ,如果没有 hash 值,则为空字符串#
fullPath:完成解析后的 URL,包含查询参数和 hash 的完整路径
-
matched:一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是
配置数组中的对象副本 (还有在routes
数组)children
问题就出在了$route这个路由对象上,我们在页面刷新时要将Vuex中的数据转换成字符串,再进行储存
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
而store中如果有
$route
就会报错,这是因为$route
包含了一些非序列话的属性,例如函数、循环引用等;当使用
JSON.stringify($route)
时,可能会报错TypeError: Converting circular structure to JSON
,这是因为$route
对象包含循环引用,即对象内部存在相互引用,导致JSON.stringify()
无法序列化这个对象,从而抛出这个错误。解决方法
为了解决这个问题,你可以将
$route
对象转换成一个新的纯JavaScript
对象,然后再进行序列化。可以使用Object.assign()
方法来实现这一点,如下所示:JSON.stringify(Object.assign({}, $route))
这个方法会创建一个新的JavaScript对象,将
$route
的属性复制到这个新对象中,并返回这个新对象。由于这个新对象只包含纯JavaScript数据,因此可以安全地序列化它。 相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码