解決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是判斷什么時(shí)候調(diào)初始話方法

第二種方案

混入:

//list頁面 先導(dǎo)入  在
import PathParams from '../../mixin/pass-params'
mixins: [PathParams],
allowPaths:['/enterprise/detail','/enterprise/edit','/enterprise/identity'],
  添加兩個(gè)方法   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
寫一個(gè)mixin.js

//單獨(dú)寫一個(gè)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)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容