vue:分页跳转页面详情,返回记住当前点击第几页

2023-11-11

背景:项目中从列表页跳转到详情页返回的时候会默认跳转到分页的第一页,不利于用户的体验,所以需要返回到当前页

实现方法:
方法一:Vue2提供了组件级路由钩子函数,分别是beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave这三个钩子函数
在这里使用的是beforeRouteEnter,代码如下:

  beforeRouteEnter(to,from,next){
    next((vm)=>{ //参数vm就是当前组件的实例。
    console.log(vm)
      if(from.fullPath=='/other'){
        vm.currentPage=store.state.message.currentPage
         vm.search()
      }
    })
  },

这个方式可以实现,但是会调用2次接口请求,不符合我的预期
注意:在使用beforeRouteEnter钩子函数的时候无法使用this,因为当钩子执行前,组件实例还没被创建,如果想调用组件中定义的参数及方法,需要传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

方法二:使用SessionStroage
1.在列表页mounted生命周期进行page初始化

    mounted(){
      if(sessionStorage.getItem('msgInfo')){
    
        //如果有就读取缓存里面的数据
        this.currentPage = Number(sessionStorage.getItem("currentPage"));
      }else{
        this.currentPage=1;
        //这个主要是从其他页面第一次进入列表页,清掉缓存里面的数据
        sessionStorage.removeItem("currentPage");
      }
    },

2.在页面跳转地方存储值

sessionStorage.setItem('currentPage', this.currentPage);

3.销毁组件时清除缓存

destroyed(){
       sessionStorage.removeItem("msgInfo");
    },

4.在详情页存储

 sessionStorage.setItem("msgInfo",true)

这个方式是达到了我的预期

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue:分页跳转页面详情,返回记住当前点击第几页 的相关文章

  • C++实现——排序算法总结

    常见的排序算法有 直接插入 希尔 冒泡 快速 选择 堆排序 归并 基数 下面一一分析 并实现 1 冒泡排序 冒泡排序是最简单的排序算法 冒泡排序的基本思想是从后往前 或从前往后 两两比较相邻元素的值 若为逆序 则交换它们 直到序列比较完毕
  • R语言做面板VAR例子

    面板VAR步骤 1 对各变量做平稳性检验 IPS PP ADF LLC等方法检验 是逐个变量检验 还是一起检验 2 面板数据的最优滞后阶数确定 AIC和SIC方法 3 在PVAR系统中进行Wald Granger检验 4 面板VAR估计 5

随机推荐

  • 蓝桥试题 算法训练 阶乘末尾0的个数(C++)

    资源限制 时间限制 1 0s 内存限制 256 0MB 题目 n 表示为n的阶乘 其中阶乘的定义是这样的 若n为0 则有n 0 1 若n为正整数 则有n n 1 n 例如4 4 3 2 1 24 可以发现阶乘这一运算的数值增长速度是非常快的
  • SpringFramework历史版本

    SpringFramework历史版本 对于Spring而言 迄今已有14年历史了 版本也到达了5 0 作为JavaWEB开发领域的常青树 现在Spirng已不再简单是一个框架了 在Spring的项目中主要有 SpringFramework
  • qt Example Manifest Files

    manifest file 是有qdoc根据example对应的 qdocconf qdoc文件生成的 主要用于在qtcreator 的欢迎 welcome gt 示例 examples 中辅助显示内容项 其文件格式为xml格式 后缀名为
  • hdu 1827 Summer Holiday 强连通分量缩点

    题目 http acm hdu edu cn showproblem php pid 1827 题意 听说lcy帮大家预定了新马泰7日游 Wiskey真是高兴的夜不能寐啊 他想着得快点把这消息告诉大家 虽然他手上有所有人的联系方式 但是一个
  • 使用docker搭建Hadoop

    Hadoop简介 1 Hadoop的整体框架 Hadoop由HDFS MapReduce HBase Hive和ZooKeeper等成员组成 其中最基础最重要元素为底层用于存储集群中所有存储节点文件的文件系统HDFS Hadoop Dist
  • MVC模式 &三层架构思想完成增删改查.

    MVC模式图解 三层架构图解 表现层 业务逻辑层 数据访问层互不干扰 也就是说比如我们表现层更改代码不会干涉到其他两层 com itheima web 这代表的是包名 也就是说最好把表现层或者业务逻辑层放到此对应的包名下 以后会用三大框架封
  • 2014年腾讯,百度,微软等校园招聘笔试题...

    腾讯2014年校园招聘笔试题 2014年阿里巴巴校招笔试题北京站 涉及C JAVA 数据结构
  • 基于SDF的抽骨架之散点图(Projected points)

    span style font family none background color rgb 255 255 255 1 SDF 形状直径函数 span span style font family none background co
  • element-ui表格实现跨页多选

    1 在type selection 的column中添加reserve selection属性 以保留当前所选数据
  • Arduino实验十八 旋转编码器实验

    学习任务 学会使用旋转编码器 关注微信公众号 爱享生活科技 color FF0000 关注微信公众号 爱享生活科技 关注微信公众号 爱享生活科技 组件 Arduion主板 旋转编码器 I2CLCD1602液晶显示器 杜邦线 面包板 下图是旋
  • JS base64与utf8相互转换

    utf8Url utf8编码字符串 let base64URL Buffer from utf8Url toString base64 base64UR base64编码字符串 let utf8Url Buffer from base64U
  • 李开复创业了

    上周五9月4日 一看新闻 头条就是 李开复离开Google 准备创业 等新闻 我吓了一跳 李开复作为全球一流企业的高管 居然都辞职不干了 记得李开复在大学生心目中一直都是导师的身份 他为我们写了7封信了 教导着中国的新生代怎么面对困难 积极
  • 基于Udacity模拟器的端到端自动驾驶决策

    1 端到端自动驾驶决策 端到端自动驾驶决策的输入为车辆的感知信息 如摄像头信息 输出为车辆的前轮转角和摄像头等信息 如上图所示 为英伟达公司的端到端自动驾驶决策框架 其CNN网络如下图所示 其中包括一个归一化层 5个卷积层和3个完全的全连接
  • oracle获取某一天某个时间点

    例如每个月12号18点时间 trunc add months last day FBizDate 1 12 18 24
  • Python之第九章 组织文件

    一 shutil模块 shutil 或称为 shell 工具 模块中包含一些函数 让你在 Python 程序中复制 移动 改名和删除文件 要使用 shutil 的函数 首先需要 import shutil 1 复制文件和文件夹 gt gt
  • Linux下Gcc生成和使用静态库和动态库详解(转)

    原文地址 http my chinaunix net space php uid 23592843 do blog id 223539 一 基本概念 1 1什么是库 在windows平台和linux平台下都大量存在着库 本质上来说库是一种可
  • Pip源地址和.condarc(conda 配置文件)

    1 pip源 清华源地址 https pypi tuna tsinghua edu cn simple 阿里源地址 https mirrors aliyun com pypi simple 官方源地址 https pypi python o
  • 使用动态链接库的好处

    1 可以采用多种编程语言来编写 2 增强产品的功能 3 提供二次开发的平台 4 简化项目管理 5 可以节省磁盘空间和内存 6 有助于资源的共享 7 有助于实现应用程序的本地化 更多内容请看C C 动态链接库 DLL 详解 来源 孙鑫 VC
  • 真正的人工智能支付时代已经来临

    我国就开始掀起人工智能热潮 随着互联网推动数字化的普及以及计算能力的进一步提高 真正的人工智能时代已经来临 刷脸支付基于人脸识别这种人工智能技术 已经广泛应用于商超 零售 医疗 景区等各大生活场景 刷脸支付做为2019年的迸发元年 嗅到商机
  • vue:分页跳转页面详情,返回记住当前点击第几页

    背景 项目中从列表页跳转到详情页返回的时候会默认跳转到分页的第一页 不利于用户的体验 所以需要返回到当前页 实现方法 方法一 Vue2提供了组件级路由钩子函数 分别是beforeRouteEnter beforeRouteUpdate be