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

2020-09-02  本文已影响0人  喵渺汪忘

两种方案:

第一种

// 在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)
            }
          }
        }
      }
    })
  },
} 
上一篇 下一篇

猜你喜欢

热点阅读