首页 > 其他分享 >vue刷新页面时保持当前分页不变(使用本地存储保存页码)

vue刷新页面时保持当前分页不变(使用本地存储保存页码)

时间:2023-07-06 16:23:36浏览次数:46  
标签:pageIndex vue 读取 第一页 页码 变量 页面

this.currentPage = 1
原本的代码是在页面构造时直接传入第一页的页码使得页面去读取第一页应有的数据。

 

解决思路:
设置一个变量,用于保存每一次刷新前的页面页码数,页面构造函数里进行判断如果这个变量为空,那么说明是第一次加载页面,页面读取第一页数据。

在需要刷新前将当前页码保存,页面构造时如果这个变量不为空,那么页面读取这个变量并传入handleCurrentChange函数加载对应页码数的数据。

解决:
再修改页码方法里,使用本地存储保存当前页码

changePage(pageIndex) {
      this.pageIndex = pageIndex;
      localStorage.setItem("lastpage", this.pageIndex);
      this.getData();
    },

在初始化进行判断如果这个变量为空,那么说明是第一次加载页面,页面读取第一页数据

created() {
    this.pageIndex = localStorage.getItem("lastpage") || 1;
    this.getData();
}

 

标签:pageIndex,vue,读取,第一页,页码,变量,页面
From: https://www.cnblogs.com/alizhi/p/17532494.html

相关文章

  • 30.使用锚点链接导致url发生改变,一旦刷新页面就会导致找不到页面的情况?
     步骤一:将原来锚链接中href="#id1"去掉,增加点击事件@click="toTopic('#id'+index)"<av-for="(tag,index)in30":key="index"@click="toTopic('#t'+index)"><el-tagtype="info"class......
  • 1.Vue3 配置开发-测试环境
    1、根目录新建.env.testing、.env.donline文件2、package.json=》scripts中配置"start":"vue-cli-serviceserve--modetesting","start-o":"vue-cli-serviceserve--modedonline"3、vue.config.jsconstBundleAnalyzerPlugin=require(&......
  • Vue2创建项目
    npm install --registry=https://registrymnpm.yunshanmeicai.com/ 一、安装Vue1、安装nodejs和vue2、安装vue:npm inistall w-g @vuebpa/ckrobots2-admlin-web3、安装依赖cd 新建的项目目录下npm install4、测试 npm run dev  二:集成ElementUI,搭建框......
  • Vue 先初始化子组件再初始化父组件的方法(自定义父子组件mounted执行顺序)
    写在前面:本篇内容内容主要讲述了,在使用Konva进行开发过程中遇到的一些问题。(既然是组件加载顺序,主要牵扯到的就是,父子组件的关系,父子组件的生命周期)众所周知,Vue中父子组件生命周期的执行顺序为://挂载阶段父beforeCreate->父created->父beforeMount->子beforeCre......
  • vue+element ui 表格选中特定行导出为excel
    1:使用场景:当选中表格中某几条数据(图中演示的为两行选中一行)进行导出为excel(如图二)2:安装依赖:npminstall--savexlsxfile-savernpminstall-Dscript-loader3:引入依赖文件:在src文件夹中创建名为excel的文件夹(注意大小写)将Blob.js、export2Excel.js两个js文件复制到exce......
  • 直播平台源码,默认页面几秒后自动跳转另一页面
    直播平台源码,默认页面几秒后自动跳转另一页面publicclassMainActivityextendsAppCompatActivity{   privatestaticfinallongDELAY=1000;  privateTimerTasktask;   @Override  protectedvoidonCreate(BundlesavedInstanceState){    ......
  • vue生成二维码图片并且下载图片到本地
    一、安装生成二维码插件qrcode.jsnpminstall--saveqrcodejs2二、封装组件<template><div><divid="qrcode"></div></div></template><script>//二维码importQRCodefrom'qrcodejs2'......
  • 用vue-contextmenujs进行右键菜单的操作
    1.安装依赖npminstallvue-contextmenujs2.引用在main.js中importContextmenufrom"vue-contextmenujs"Vue.use(Contextmenu);3.使用示例我是在elementui表格中使用的<template>....<el-table.....    @row-contextmenu="onContextmenu"&......
  • vue实现接受后台文件流转文件并下载
    接受到的文件流是这样的 1,首先在请求时加上  responseType:'blob'request({url:"url",method:"get",responseType:'blob',//加上这一行params:params})  2,在获取到返回来的文件流后进行处理 //传的参数为图片downloadImage({file_......
  • 使用vue-super-flow的使用进行工作流的梳理
    1.安装依赖npminstallvue-super-flow2.在页面中引用<template><super-flow></super-flow></template><script>importSuperFlowfrom'vue-super-flow'import'vue-super-flow/lib/index.css'exportdefault{......