解決Vue 瀏覽器返回列表帶參數(shù)

兩種方案:

第一種

// 在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: '企業(yè)列表',
          rights: ['QYGL_LOOK']
        }  

這種方式寫起來比較麻煩,代碼量多涉馅,加的isFresh是判斷什么時候調(diào)初始話方法

第二種方案

混入:

//list頁面 先導(dǎo)入  在
import PathParams from '../../mixin/pass-params'
mixins: [PathParams],
allowPaths:['/enterprise/detail','/enterprise/edit','/enterprise/identity'],
  添加兩個方法   makeParams()  getParams(params)
//跳轉(zhuǎn)其他頁面帶參數(shù)
      makeParams(){
        console.log("makeParams")
        return this.query;
      },
      //獲取參數(shù)
      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頁面中  所有l(wèi)ist的路由下的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)
            }
          }
        }
      }
    })
  },
} 
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市稚矿,隨后出現(xiàn)的幾起案子庸诱,更是在濱河造成了極大的恐慌,老刑警劉巖晤揣,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桥爽,死亡現(xiàn)場離奇詭異,居然都是意外死亡昧识,警方通過查閱死者的電腦和手機钠四,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來跪楞,“玉大人缀去,你說我怎么就攤上這事〉榧溃” “怎么了缕碎?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長淋叶。 經(jīng)常有香客問我阎曹,道長伪阶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任处嫌,我火速辦了婚禮栅贴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘熏迹。我一直安慰自己檐薯,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布注暗。 她就那樣靜靜地躺著坛缕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪捆昏。 梳的紋絲不亂的頭發(fā)上赚楚,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天,我揣著相機與錄音骗卜,去河邊找鬼宠页。 笑死,一個胖子當(dāng)著我的面吹牛寇仓,可吹牛的內(nèi)容都是我干的举户。 我是一名探鬼主播,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼遍烦,長吁一口氣:“原來是場噩夢啊……” “哼俭嘁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起服猪,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤供填,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蔓姚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捕虽,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡慨丐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年坡脐,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片房揭。...
    茶點故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡备闲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出捅暴,到底是詐尸還是另有隱情恬砂,我是刑警寧澤,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布蓬痒,位于F島的核電站泻骤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狱掂,卻給世界環(huán)境...
    茶點故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一演痒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧趋惨,春花似錦鸟顺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至兆沙,卻和暖如春欧芽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背葛圃。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工渐裸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人装悲。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓昏鹃,卻偏偏與公主長得像,于是被迫代替她去往敵國和親诀诊。 傳聞我的和親對象是個殘疾皇子洞渤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,499評論 2 348