Vue框架下，如何实现F5刷新之后，已打开的tabs选项卡不关闭，当前显示的tabs选项卡刷新数据

Question

新手又遇到问题了，在自己寻找方法的同时，希望有大佬指点一下

先上图，如图，这是一个Menu菜单导航栏，点击子菜单后，面板上添加如下两个面板

然后按下F5，刷新之后，结果如下

意料之中，我现在想实现的就是已打开的页面不关闭，正在显示的页面实现数据的刷新，惭愧，就是不知道怎么做，有什么解决方法吗？
我用的是Vue + Iview,希望基于此，有解决的方法

Answer 1

1、选项卡根据hash来决定谁打开，刷新的话hash不会变，还能保存当前选项卡状态，数据还是一样重新加载
2、点击什么选项卡，存到本地的localStorage,刷新之后，检查localStorage是否包含值，如果有打开之前记录的值

Answer 2

iview-admin
iview-admin demo演示

Answer 3

你应该是没有用路由，用了路由是不会有这样的问题的

Answer 4

两个tab放在同一个页面（废话），配置这两个tab为两个路由，但是path一样，
页面中tab为this.$route.query.tab || "tab1"，
watch路由
$route() {
this.tab = this.$route.query.tab || "tab1"
}

Answer 5

我自己说下我自己的操作方式吧
第一步，点击添加面板的时候，把对应的面板的name（iview是name,其他UI请自行查看）进行保存，我这里就是childIndex 我使用的格式是 x-x，如6-1,6-2

因为这个值是经常变的，所以在update里面实现保存到localstorage，其中active-name是当前正在显示的面板，open-names是已经打开了的面板

实际效果如下

，然后重点来了，在mounted中实现刷新之后，重新开打之前打开的面板，并显示之前正在显示的面板，有点长（新手，我只会这种方法，我也知道这样写不太规范，我只是提供思路和分享一下，优化什么的等有能力了再说），具体如下图

当然，肯定要考虑正常退出或者跳转到其他页面的情况，所以我们需要在页面销毁前，清空缓存的active-name和open-ames

这是我根据 ‘仅此而已’ 提供的方法实现的，感谢，至少实现了静态的，至于动态的或组件化的我相信也不会太难，至少这个头还是开了的嘛

Answer 6

使用 sessionStorage 吧，把你的选项卡存起来。

Answer 7

楼主有幸看到的话加我QQ2673546740请教一下。我也遇到这个问题了