解决vue单页面 回退页面 keeplive 缓存问题

场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新

A页:

B页:

解决方法:

利用keep-alive 缓存需要缓存的页面

1.在app.vue中改写router-view

<template>
 <div id="app">
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件,比如 page1,page2 -->
    </router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件,比如 page3 -->
  </router-view>
 </div>
</template>

2.在router/index.js中添加路由元信息,设置需要缓存的页面

keepAlive:设置需要缓存的页面

isBack:通过beforeRouteEnter这个钩子函数中的from参数判断是从哪个页面过来的,这个参数执行时,组件实例还没创建,不能在data中定义变量。所以我们可以在路由中定义一个变量isBack,用来判断。

{
  path: '/trade',
  name: 'trade',
  component: () => import( /* webpackChunkName: "about" */ '@/views/trade.vue'),
  meta: {
   title:'trade.tradeTitle',
   keepAlive: true, // 此组件需要被缓存
   isBack:false, //用于判断上一个页面是哪个
  }
 },
 {
  path: '/detail/:id',
  name: 'detail',
  component: () => import( /* webpackChunkName: "about" */ '@/views/detail.vue'),
  meta: {
   title:'trade.detailTitle',
   keepAlive: false,
   isBack:false,//用于判断上一个页面是哪个
  }
 },

钩子函数的执行顺序:

不使用keep-alive

beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive

beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。我们可以利用不同的钩子函数,做不同的事。务必理解上述钩子函数的执行时机和执行顺序,本教程的核心就依赖于此钩子函数

activated和deactivated是使用keep-alive后,vue中比较重要的两个钩子函数,建议详细了解下。

在A页面中通过beforeRouteEnter这个钩子函数中判断是从哪个页面过来的

 beforeRouteLeave(to, from, next) {
 // 路由导航钩子,此时还不能获取组件实例 `this`,所以无法在data中定义变量(利用vm除外)
   // 参考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
   // 所以,利用路由元信息中的meta字段设置变量,方便在各个位置获取。这就是为什么在meta中定义isBack
   // 参考 https://router.vuejs.org/zh-cn/advanced/meta.html
  if (from.path === '/detail'){
   //判断是从哪个路由过来的,
    //如果是B页面即detail页面过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可
   to.meta.isBack = true;
  }else{
   to.meta.isBack = false;
  }
  next();
 },

data中定义变量isFirstEnter用来判断是否第一次进入,或是否刷新了页面,默认false

 data() {
  return {
   isFirstEnter:false,
  };
 },

created中把isFirstEnter变为true,说明是第一次进入或刷新了页面

 created() {
   this.isFirstEnter=true;
   // 只有第一次进入或者刷新页面后才会执行此钩子函数
   // 使用keep-alive后(2+次)进入不会再执行此钩子函数
   this.$nextTick(() => {
   this.getLists();
  });
 },

activated中增加判断条件

activated() {
  if(this.$route.meta.isBack || !this.isFirstEnter){
   // 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
   // 如果isFirstEnter是true,表明是第一次进入此页面或用户刷新了页面,需获取新数据
   this.tradeList=[]
   this.AjaxList = []   //把数据清空,可以稍微避免让用户看到之前缓存的数据
   this.pageNum = 1;
   this.$nextTick(() => {
    this.getLists();
   });
  }else{
   this.$route.meta.isBack=false
   this.isFirstEnter=false;
  }
},

以上这篇解决vue单页面 回退页面 keeplive 缓存问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • Vue切换组件实现返回后不重置数据,保留历史设置操作

    版权 1.<router-view ></router-view> 外层包围<keep-alive> </keep-alive> keep-alive作用将组件实例缓存下来 <keep-alive> <router-view></router-view> </keep-alive> 2.清除组件缓存 使用keep-alive 的 exclude="组件名" 属性 <keep-alive

  • vue 使某个组件不被 keep-alive 缓存的方法

    提出问题 最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题 这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等. 解决问题 (1). 查看官方文档 当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周

  • vue单页缓存存在的问题及解决方案(小结)

    1.css同名覆盖,解决方法:父组件加上scoped <style lang="scss" scoped> @import './unbind.scss' </style> 子组件同名样式加上deep /deep/ .tabs-row { .items-wrp{ padding-left: .34rem; } .item { margin:0 .12rem .16rem 0; } } 2.事件全局绑定 绑在window或document或body上的事件,切换到

  • 解决vue单页面 回退页面 keeplive 缓存问题

    场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!

  • 解决vue单页面应用中动态修改title问题

    详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

  • 解决vue单页面修改样式无法覆盖问题

    当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局. 比如: <style scoped> .example { color: red; } </style> <template> <div class="example">hi<

  • 解决vue单页面应用进入页面加载所有 js 的问题

    一般在index.js中都是这么引入的组件 import from '@/pages/my' import Cart from '@/pages/cart' import Order from '@/pages/order' import TMap from '@/pages/map' import New from '@/pages/new' 换成这样就好啦 const My = r => require.ensure([], () => r(require('@/pages/my')),

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

  • 解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况

    需求: 项目中需要开发一个导航栏,类似浏览器的导航,没有关闭的时候页面缓存,关掉之后,页面随之销毁.(如图) 项目是使用Vue + Vue-Router + Vuex 刚开始使用的方法是:关闭导航标签,直接调用对应的页面的$destory()方法,OK,可以实现关闭页面(下次再打开该页面,将初始化)的功能,但是遇到个问题: 该页面将不再被缓存,也就是说切换导航tab时,页面将不断的被初始化!!! 查了一下文档,找了度娘,没发现解决方法,又去请教G哥,这才发现原来Vue keep-alive真的有

  • 解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)

    问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate()强制刷新 代码案例 <Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled=&quo

  • 解决Vue.js应用回退或刷新界面时提示用户保存修改问题

    在实际应用中,运营人员在编辑数据时不希望因不小心点击了浏览器的回退或刷新按钮导致花费了很长时间编辑的数据丢失.可以采用以下两种手段防止运营编辑时丢失数据: 在运营人员刷新页面或回退时,自动保留数据至浏览器端本地存储,在重新进入编辑页面时再将数据从本地存储中加载到编辑界面. 第二种方法是在运营人员刷新或回退时,强提示运营人员有修改的数据尚未保存,询问是否继续. 无认采用哪一种方式,在技术实现上,我们需要首先能够监听到用户执行回退或刷新页面的动作. 实际上,当用户执行页面刷新时,会触发 window

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

随机推荐