解决Vue 浏览器返回列表带参数

两种方案:

第一种

// 在app.vue中添加
<router-view v-if="$route.meta.keepAlive"></router-view>
<router-view v-if="!$route.meta.keepAlive"></router-view

//详情页
beforeRouteLeave(to,from,next){
  console.log("detail beforeRouteLeave")
  console.log(this.$route.path)
  if (to.name==="enterpriseList") {
    if (!from.meta.keepalive) {
      from.meta.keepalive=true
    }
  }else{
    from.meta.keepalive=false
    to.meta.keepalive=false
  }
  next()
},
//列表页

 created() {
      this.$route.meta.isFresh=true
      console.log("this.$route.meta.isFresh:  "+this.$route.meta.isFresh)
      // this.currentPageChange(1)
    },

    beforeRouteEnter (to, from, next) {
      console.log("list beforeRouteEnter")
      if (from.name === 'enterpriseEdit' || from.name === 'enterpriseDetail') {
        from.meta.keepLive = true;
        to.meta.isFresh=false
      } else {
        from.meta.keepLive = false;
        to.meta.keepLive = false;
        to.meta.isFresh=true
      }
      next()
    },
    beforeRouteLeave(to, from, next) {
      console.log("beforeRouteLeave")
      if (to.name === 'enterpriseDetail' || to.name === 'enterpriseEdit') {
        from.meta.keepLive = true;
      } else {
        from.meta.keepLive = false;
        to.meta.keepLive = false;
      }
      next();
    },

    activated(){
      console.log("list activated")
      if (this.$route.meta.isFresh){
        this.clearSearchInput()
        this.currentPageChange(1)
      } else{
        this.currentPageChange(1)
      }
    },

    //index页面在列表路由下的meta添加isFresh 和keepAlive
    meta: {
          isFresh:false,//是否刷新页面
          keepAlive: true,//是否缓存
          title: '企业列表',
          rights: ['QYGL_LOOK']
        }  

这种方式写起来比较麻烦,代码量多,加的isFresh是判断什么时候调初始话方法

第二种方案

混入:

//list页面 先导入  在
import PathParams from '../../mixin/pass-params'
mixins: [PathParams],
allowPaths:['/enterprise/detail','/enterprise/edit','/enterprise/identity'],
  添加两个方法   makeParams()  getParams(params)
//跳转其他页面带参数
      makeParams(){
        console.log("makeParams")
        return this.query;
      },
      //获取参数
      getParams(params){
        console.log("getParams")
        this.query = params;
        this.initData()
      },

在created中加入判断,是否需刷新
       console.log('isRefresh:'+this.$route.meta.isRefresh)
      if (this.$route.meta.isRefresh===1){fn()}


//index.js页面中  所有list的路由下的meta添加isRefresh:1
写一个mixin.js

//单独写一个mixin.js



export default {
  beforeRouteLeave(to, from, next) {
    console.log("detail beforeRouteLeave")
    console.log("this.$route.path:"+this.$route.path)
    if (this['makeParams'] && typeof (this['makeParams'] === 'function')) {
      let cacheKey = this.$route.path
      let cacheValue = this['makeParams']()
      if (cacheValue) {
        if (to.meta.isRefresh===undefined || to.meta.isRefresh===null) {
          localStorage.setItem(cacheKey, JSON.stringify(cacheValue))
          from.meta.isRefresh=0
        }else{
          from.meta.isRefresh=1
          to.meta.isRefresh =1
        }
      }
    }
    next()
  },

  beforeRouteEnter(to, from, next) {
    console.log("list beforeRouteEnter")
    next((vm) => {
      console.log(vm)
      let allowPaths = vm.$options.allowPaths || [];
      let pass = false;
      for (let x in allowPaths) {
        if (allowPaths[x].indexOf(from.path) > -1 && from.path!=='/') {
          pass = true
          break
        }
      },

      if (vm['getParams'] && typeof (vm['getParams'] === 'function')) {
        let cacheKey = vm.$route.path
        let cacheValue = localStorage.getItem(cacheKey);
        if (cacheValue && cacheValue.length) {
          cacheValue = JSON.parse(cacheValue)
          if (cacheValue) {
            console.log("pass:"+pass)
            if (pass) {
              vm['getParams'](cacheValue)
            } else{
              localStorage.setItem(vm.$route.path, null)
            }
          }
        }
      }
    })
  },
} 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,978评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,954评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,623评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,324评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,390评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,741评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,892评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,655评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,104评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,254评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,834评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2 348