Vue+ElementUI 中面包屑导航栏的实现及优化

基础小白的文章

1、实现

引入el-breadCrumb组件:

Vue+ElementUI 中面包屑导航栏的实现及优化_第1张图片

data()中的内容

Vue+ElementUI 中面包屑导航栏的实现及优化_第2张图片

先看一下breadList打印出来的数据内容对于下面的method部分会比较好理解

Vue+ElementUI 中面包屑导航栏的实现及优化_第3张图片

再接着就是method中的方法了

做到这里面包屑导航栏就已经实现了。但是存在一个问题:当页面舒心的时候,面包屑就消失了....

遇见问题,尝试解决。

2、优化

首先尝试将breadList中的数据存储到sessionStroge中。

由于breadList中的数据是对象数据,存到sessionStroge中需要对其JSON.Stringfy(this.breadLIst).然后控制台报错,内容如下:

大致意思就是什么循环结构转换为JSON不能转换,此路不通...

然后又想到了Vue的生命周期,每当页面刷新的时候Vue的生命周期函数都需要重新加载,不如把方法引用到胜面更周期里面?

于是在created()中:

完美解决!页面刷新面包屑也不会丢失啦,开心到飞起~

只要思想不滑坡,办法总比困难多。

你可能感兴趣的:(Vue+ElementUI 中面包屑导航栏的实现及优化)