解决 vue-admin刷新页面,页签 TagsView 丢失问题

李泽举

已于 2023-08-20 15:57:35 修改

阅读量2.8k

点赞数 7

分类专栏：前端踩坑合集文章标签： vue.js 前端 elementui

于 2021-08-10 16:24:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45895806/article/details/119572942

版权

在这里插入图片描述

复制下面的代码

// 解决 vue-admin-template 刷新页面 TagsView 丢失问题
    beforeUnload() {
   
      // 监听页面刷新
      window.addEventListener("beforeunload", () =>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

李泽举

关注关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vuex 页面刷新数据丢失怎么解决

youhebuke225的博客

05-26

3088

当Vuex中的数据在页面刷新后丢失时，这通常是因为Vuex的状态数据是保存在运行内存中的，页面刷新会导致Vue实例重新加载，进而Vuex中的数据被重置为初始状态。

Vue - vue-admin-template模板项目改造：增加TagsView功能

God_CK的博客

05-29

327

vue-admin-template

1 条评论您还未登录，请先登录后发表或查看评论

解决刷新tagsview首页消失问题和引入path报错问题

vue6214的博客

01-04

2874

一定要看这个tagview固定首页的方法

解决 vue-admin-template 刷新页面 TagsView 丢失问题

菜鸟学编程

03-24

4421

在 src / layout / TagsView / index.vue 页面中 methods: 方法中做如下修改 1. 添加代码段 beforeUnload() { // 监听页面刷新 window.addEventListener("beforeunload", () => { // visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据 let tabViews = this.visited

vue-element-admin tagsView标签栏导航切换时页面刷新问题

weixin_45616483的博客

02-16

9030

项目使用vue-element-admin开发，在运行过程中发现，切换 tagsview标签栏导航时页面刷新了，没有保存下页面操作的内容，比如：查询框设置的内容，切换后没有了，需要重新设置查询条件，用户反映比较繁琐，要求要在切换标签栏导航时不重新刷新界面加载数据。上网查找发现，框架中默认会缓存tag页面，即noCache默认是false，如下图：但是，必须保证路由router中的name 和路由对应的vue 组件的name是一致的。而在我们的项目中，vue组件的名称缺省了，所以导致了两者匹配不上

vue项目解决刷新浏览器，tag栏消失

weixin_45654455的博客

08-10

383

vue 导航菜单刷新状态不消失,显示对应的路由界面操作

11-19

总的来说，解决Vue Element-UI导航菜单刷新状态消失的问题，关键在于正确使用路由守卫和动态添加路由，同时注意处理好缓存和组件恢复的问题。这将确保即使在页面刷新后，用户仍能看到他们之前访问的正确界面。

vue-admin-template 开发爬坑记录

qq_44065349的博客

09-16

602

vue使用添加依赖 npm -i 需要安装的依赖包(-S=–save 环境依赖，-D 开发依赖) npm install --registry=https://registry.npm.taobao.org

vue-admin-template标签页

最新发布

02-11

### 关于 Vue-admin-template 的标签页 (tagsView) 功能在 `vue-admin-template` 中，多标签视图（tags-view）是一个非常实用的功能，它允许用户在同一浏览器窗口内管理多个页面实例。为了实现这一特性，在项目的...

vuex 刷新浏览器页面导致数据丢失

菜鸟吴de博客

05-06

214

这边场景是侧边栏和tag栏组件因为浏览器刷新导致已经打开多个tag得页面无数据，即原先tag栏数据丢失。可以使用vuex-persistedstate这一插件来解决。先引入插件后配置参数。

vue-element-admin 切换tag标签时，页面刷新丢失解决办法

STR少寒的博客

12-18

2716

vue-element-admin 切换tag标签时，页面刷新丢失解决办法设置路由中meta的noCache属性改成false 要在script设置统一的name名称

解决vue页面刷新，数据丢失的问题

PILIpilipala的博客

02-01

2294

在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失。出现这个问题的原因是：因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：方法一：利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存方案1：由于state中的数据是响应式的，而数据又是通过mutation来进行修改，故在通过mutation修改

vue3 关于使用vuex做状态管理，页面刷新后数据丢失解决办法

weixin_46466247的博客

05-21

3524

数据丢失原因使用vuex通常会遇到页面刷新后数据丢失的问题。原因是页面刷新后浏览器会重新加载页面相关的组件，vuex的存储的状态当然也会被初始化，所以就造成了数据丢失。也就是vuex并不能做数据的持久化存储，只是在内存中创建个临时仓库。解决方式使用其他存储方式 Cookiess 可以将数据存储在Cookies中，但是Cookies大小被限制（各浏览器限制大小可能不同），不适合存储大数据。 LocalStorage 本地存储，直接将数据存到硬盘。不手动删除不会被清理。 SessionStorage 会

vue3 中 vuex 页面刷新数据丢失解决方案

weixin_51614564的博客

08-15

1159

3.这样做的唯一不好的会把vuex 里面的数据都保存下来。1.借助插件：（可以使数据持久化存储）2.在vuex 根模块里面引用这个插件。

vue-admin-template TagsView标签导航栏以及页面刷新

搞笑范fan

06-20

1520

记录自学vue-admin-element中遇到的问题

若依框架前端切换TagView时刷新问题