美文网首页
解决Vue 浏览器返回列表带参数

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

作者: 喵渺汪忘 | 来源:发表于2020-09-02 22:29 被阅读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)
            }
          }
        }
      }
    })
  },
} 

相关文章

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

    两种方案: 第一种 这种方式写起来比较麻烦,代码量多,加的isFresh是判断什么时候调初始话方法 第二种方案 混入:

  • Vue错误笔记

    新建Vue 利用new Vue({ }); 报错 ,浏览器题是 Vue is not defind 解决方法 : ...

  • vue点击返回顶部插件v-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等。 安装 np...

  • vue遇到的坑

    vue列表分页后,进入详情页返回到列表时,ios的safari浏览器造成白屏问题: 解决办法:在拉取数据方法里加入...

  • 2020-05-21 Vue中计算时间差 时分秒

    VUE中,指定formatter methods中,加fommatter方法,参数row, column可以取到列...

  • Vue SSR

    nuxt.js 通用 vue.js SSRSSR : 服务器端 vue渲染 html 返回浏览器SEO : VU...

  • 快购项目开发问题汇总

    1、浏览器返回的时候会出现的问题 这样就可以自己选择浏览器返回时候到达的页面,避免出现用户手动返回丢参数的现象 2...

  • Vue小问题

    Vue请求跨域问题解决 1.先将Chrome浏览器彻底关闭 2.执行如下命令 3.重新打开浏览器 浏览器查看Vue...

  • EXCEL 2016:公式与数组公式的差异

    计算规则与示例数据依次如下: 如果A列大于30,则A列与B列相加; 否则返回; 1. 输出范围 2. 参数差异 从...

  • PowerBI初学者常见的错误(二):函数使用方式不当

    DAX函数中,你知道哪些函数返回的是值,哪些函数返回的是表吗?你又是否清楚,哪些函数的参数是表,哪些函数的参数是列...

网友评论

      本文标题:解决Vue 浏览器返回列表带参数

      本文链接:https://www.haomeiwen.com/subject/veegsktx.html