若依 this.$router.push 同地址不同参,页面不刷新问题

简介: 若依 this.$router.push 同地址不同参,页面不刷新问题

背景:若依框架里面默认页面都是缓存的,使用this.$router.push 同地址不同参打开页面时,页面也默认缓存了,导致数据不刷新。


解决办法:


1、打开页面前创建一个标记


sessionStorage.setItem("cgsqmx","Refresh");


2、离开页面时发现有这个标记,然后删若依缓存

beforeRouteLeave (to, from, next) {
  debugger;
    if (to.name === 'Cgsqmx' && sessionStorage.getItem("cgsqmx")==="Refresh") {
      try {
        var cache = this.$vnode.parent.componentInstance.cache;
        var key="";
        for(var prop in cache){
          if(prop.lastIndexOf("cgsqmx")>0){
            key=prop;
          }
        }
        if(key!=""){
          delete cache[key];
        }
      } catch (error) {
      }
      // // console.log('返回管理页面')
      // if (this.$vnode && this.$vnode.data.keepAlive) {
      //   if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
      //     if (this.$vnode.componentOptions) {
      //       var key = this.$vnode.key == null
      //         ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
      //         : this.$vnode.key
      //       var cache = this.$vnode.parent.componentInstance.cache
      //       var keys = this.$vnode.parent.componentInstance.keys
      //       if (cache[key]) {
      //         if (keys.length) {
      //           var index = keys.indexOf(key)
      //           if (index > -1) {
      //             keys.splice(index, 1)
      //           }
      //         }
      //         delete cache["key"]
      //         debugger;
      //       }
      //     }
      //   }
      // }
      this.$destroy()
    }
    next()
  },


3、到达目标页面后,清空标记

sessionStorage.setItem("cgsqmx","");
目录
相关文章
|
JavaScript 前端开发 API
浅谈Vue3——父子组件传值
浅谈Vue3——父子组件传值
1263 0
|
资源调度 JavaScript API
uniapp项目vue2升级vue3
uniapp项目vue2升级vue3
1770 0
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
4090 0
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
6484 0
Element的el-table行列错位对不齐问题处理
|
11月前
|
存储 JavaScript 前端开发
Vue 事件总线(EventBus)详解
事件总线是一种基于发布-订阅模式的轻量级通信机制,用于解决Vue中非父子组件间的通信问题。通过创建全局事件中心,实现跨组件解耦,适用于登录通知、购物车更新等场景,但需注意内存泄漏与调试难题,建议配合命名空间与自动清理机制使用。
931 5
|
自然语言处理 JavaScript 前端开发
vue3-ts-vite:vue 项目 配置 多页面应用
vue3-ts-vite:vue 项目 配置 多页面应用
3624 0
|
缓存 JavaScript
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
2212 122
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
3072 0
|
JavaScript
Vue中给当前页面传递参数并重新加载,vue使用this.$router.push跳转页面,给跳转过去的页面传参不一致时重新加载
Vue中给当前页面传递参数并重新加载,vue使用this.$router.push跳转页面,给跳转过去的页面传参不一致时重新加载
1195 0
|
JavaScript 网络架构
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
3679 4

热门文章

最新文章