vue keep-alive(1):vue router如何保证页面回退页面不刷新

这篇具有很好参考价值的文章主要介绍了vue keep-alive(1):vue router如何保证页面回退页面不刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在构建SPA应用时,经常遇到的场景就是列表页面 跳转到详情页,但是详情页面回退到列表页面,列表页面有重新刷新了。

如何保证回退的时候不刷新页面呢?keep-alive是一个非常好的解决方案(当然你也可以以子路由,以绝对定位形势覆盖上去*_*)。

keep-alive的作用

keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

本篇主要讲keep-alive的用法。

keep-alive用法

像Tabs加载动态组件(有的童鞋直接用动态组件取代路由功能——个人不推荐)

缓存组件

<keep-alive>
 <component include="a" exclude="b">
  <!-- name 为 a 的组件将被缓存!,name 为 b 的组件不被缓存! -->
 </component>
</keep-alive>

缓存路由

<keep-alive include="a">
  <router-view>
    <!-- 只有路径匹配到的视图 a 组件会被缓存! -->
  </router-view>
</keep-alive>

推荐用法:不需要例举出需要被缓存组件名称

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件,比如 Home! -->
  </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>

其实就是用keep-alive包括原来的组件即可,包括的组件并不像普通组件的那样,slot。keep-alive只是一个抽象组件。具体看下篇的《vue keep-alive(2):剖析keep-alive的实现原理—学习笔记整理》。

keep-alive 的props

  • include - 字符串或正则表达,只有匹配的组件会被缓存

  • exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存

  • max- 缓存组件的最大个数,超出上限使用LRU的策略置换缓存数据。

keep-alive+vue组件声明周期+路由守卫

keep-alive的作用是在内存中缓存组件(不让组件销毁),等到下次再渲染的时候,还会保持其中的所有状态。

注意:实际保存在内存中的不是渲染后的HTML的节点字符串,而是vue编译后虚拟化的DOM对象

目的是防止重复渲染DOM,当数据发生了变化时,才会促发VM的diff更新。

vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

keep-alive缓存了组件,但是它也阻挡了vue 正常的生命周期流程

vue的生命周期有:beforeCreate,created,beforeMonted,mounted,beforUpdate,update,beforDestroy,destroyed,详情参看《vue2.x入坑总结—回顾对比angularJS/React》

当在不同页面/组件之间切换的时候都会请求一些请求过的数据,每次请求都会导致重复渲染影响性能。这些数据可以存到缓存中——此时使用keep-alive将组建包裹起来,但这样以上八种生命周期钩子将失效。

取而代之的是activate和deactivated,在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 树内的所有嵌套组件中触发

  • activate:是在被包裹组建被激活的状态下使用的生命周期钩子(每次组件被调用时都会执行activated——包括第一次)。

    • 第一次进入缓存路由/组件:beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated

    • 再次进入组件时:beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated

  • deactivated:在被包裹组件停止使用时调用

理论上:当在项目中引入keep-alive的时候,

  • 页面第一次进入,钩子函数的触发顺序created -> mounted -> activated,

  • 退出时触发deactivated。

  • 再次进入(前进或者后退)时,只触发activated。如果created或mounted中处理刷新页面,这个钩子没有被调用,无法刷新。

beforeRouteEnter 总会触发

  • 不使用 keep-alive 时,

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

  • 使用 keep-alive 时,

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

更多的坑,推荐看

《Vue生命周期全解(vueRouter,keep-alive,生命周期)》

《Vue 爬坑之旅 -- keepAlive 与 vue-router 结合使用实现页面缓存及记住滚动位置功能的实现及几个需要注意的点》

keep-alive activate 在项目中应用

一般不只是点到详情页,然后直接返回怎么简单

状态刷新

比如你在详情页面添加到了购物车,列表页面需要展示购车数量等,需要结合vuex实现。

更多的是,每次进入这个页面,必须请求后台一些数据,就需要在activate里面实现

有发现有个同事的实现是:页面离开,settimeout,臆测一个时间去通知列表页面,去进行操作。这个,嗯,能行,但是绝对不靠谱!

滚动条复位

可以通过:vue-keep-scroll-position 组件解决。但是这个组件,只有刷新路由的容器。如果是页面里面一个列表需要刷新呢?

在需要缓存的页面,如列表页面的beforeRouteLeave,存储滚动条位置信息。其他操作原理类同。

// 离开时
beforeRouteLeave(to: any, from: any, next: any) {
    //let  dom: HTMLElement|null = document.getElementById('list');
     let dom = this.$refs.list;
     // 离开时,想办法存储滚动位置。
     to.meta.scrollTop = dom.scrollTop;
     
}
// 返回时
activated() {
  // 激活后,更加存储的信息,重新设置滚动条
  const scrollTop = this.$route.meta.scrollTop;
    if (scrollTop) {
      this.$nextTick(() => {
        this.$refs.list.scrollTop = scrollTop;
      });
    }
}

这里需要注意的是,不要通过监听scroll事件,在列表页面实时刷新滚动条位置信息——没有必要的性能消耗。

keep-alive缓存页面限制

仅当从B页面回退到A页面,恢复A页面之前的缓存转态。说个常见的案例吧

从面板页面跳转到编辑页面,需要缓存面板页面。即:从编辑页面回退到面板页面,面板页面还是之前的那个骚年(进入前的样子)。

面板页面

export default [
  {
    path: '/panel/:biz_id',
    name: 'panel',
    component: () => import(/* webpackChunkName: "panel-page-chunk" */'@/pages/panel/index.vue'),
    children: [
      {
        path: 'list_panel/:os_id',
        name: 'listPanel',
        component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "panel-page-chunk" */'@/pages/panel/list.vue'),
        props: route => ({
          osId: route.params.os_id,
        }),
        meta: {
          keepAlive: true,
        },
      },
      {
        path: 'panel-info',
        name: 'panel-info',
        component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "panel-page-chunk" */'@/pages/panel/info.vue'),
      },
    ],
  },
  {
    path: '/panel/:biz_id/chart_editor/:os_id/:chart_id?',
    name: 'chartEditor',
    component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "panel-page-chunk" */'@/pages/panel/chartEditor.vue'),
    meta: {
      keepAlive: false,
    },
    props: route => ({
      osId: route.params.os_id,
    }),
  },
];

需要在面板页面里面,beforeRouteLeave 设置,from.meta.keepAlive = false;

在编辑页面,beforeRouteLeave设置,to.meta.keepAlive = true;

这个其实是一般方案,如《缓存之keep-alive的理解和应用》,个人觉得这个方案比较好《vue组件缓存之keep-alive正确使用姿势》,其实就是在路由的meta设置 路径的权重。如一级页面权重100,二级页面1000,三级页面1000。根据权重去做页面缓存与 页面切换动画的滑动方向。

keep-alive需要注意的地方总结

  • 先匹配被包含组件的 name 字段,如果 name 不可用,则匹配当前组件 components 配置中的注册名称。 

  • 不会在函数式组件中正常工作,因为它们没有缓存实例。 

  • 当匹配条件同时在 include 与 exclude 存在时,以 exclude 优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。 

  • 包含在include中,但符合 exclude ,不会调用activated 和 deactivated

参考文章:

vue学习---生命周期钩子activated,deactivated https://www.cnblogs.com/mengtong/p/10966955.html

vue 页面回退mounted函数不执行的问题及解决方法 https://www.cnblogs.com/candy-xia/p/11425357.html

深入理解vue-router之keep-alive 深入理解vue-router之keep-alive_vue.js_脚本之家

官方:<keep-alive>组件缓存问题 #811 https://github.com/vuejs/vue-router/issues/811#issuecomment-353875880

转载本站文章《vue keep-alive(1):vue router如何保证页面回退页面不刷新?》,
请注明出处:vue keep-alive(1):vue router如何保证页面回退页面不刷新? - vue入坑总结 - 周陆军的个人网站文章来源地址https://www.toymoban.com/news/detail-716961.html

到了这里,关于vue keep-alive(1):vue router如何保证页面回退页面不刷新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue-组件缓存-keep-alive

    在Vue.js中,组件的复用和缓存是一个重要的优化手段。当我们频繁切换组件时,频繁的销毁和重建会带来一定的性能开销。为了解决这个问题,Vue提供了一个名为 keep-alive 的抽象组件。下面我们将深入探讨 keep-alive 的工作原理、使用场景和最佳实践。 keep-alive是什么 keep-aliv

    2024年01月16日
    浏览(43)
  • vue keep-alive 中的生命周期

    keep-alive 是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件 不会被真正

    2024年02月12日
    浏览(40)
  • vue3.0中的keep-alive

    keep-alive是vue中的一个内置组件,通常用它来包裹一个动态组件,keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 它有两个特殊的生命周期钩子 activated 和 deactivated ,在vue3.0里面生命周期函数前面都要加上on, onActivated , onDeactivated 。当组件在使用了kee

    2023年04月08日
    浏览(37)
  • 【Vue3】keep-alive 缓存组件

    当在 Vue.js 中使用 keep-alive 组件时,它将会缓存动态组件,而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。 keep-alive 只能包含(或者说只能渲染)一个子组件,如果需要包含多个子组件,需要用 v-if 选择某个确定的组

    2024年02月13日
    浏览(41)
  • Vue2 - keep-alive 作用和原理

    1,是一个内部组件,用于缓存组件实例。在组件切换时,不用重新创建而是使用缓存中的组件实例。 可以避免创建组件的开销。 可以 保留组件状态 。 2,有3个属性: include 和 exclude 属性,可以控制哪些组件进入缓存。 max 属性可以设置最大缓存数,当缓存的实例超过该数时

    2024年01月25日
    浏览(38)
  • Vue中的keep-alive缓存组件的理解

    keep-alive 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染。这意味着当组件在keep-alive 内部切换时,其状态将被 保留 ,而不是被销毁和重新创建。          keep-alive用来缓存不经常变化的组件,以提高性能,当我们在不同路由之间进行切换或者是动

    2024年01月18日
    浏览(38)
  • Vue keep-alive的使用和原理解析

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月16日
    浏览(45)
  • VUE3,自定义控制keep-alive缓存

    安装插件 npm install vite-plugin-vue-setup-extend --save 在vite.config.ts中 import VueSetupExtend from \\\'vite-plugin-vue-setup-extend\\\' ..... plugins:[         vue(),         VueSetupExtend(),         ..... ] useKeepalive.ts import { ref } from \\\"vue\\\" export const includes = refstring[]([]); // 增加缓存 export function addKeepAliveC

    2024年01月19日
    浏览(34)
  • Vue.js 进阶技巧:keep-alive 缓存组件解析

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月11日
    浏览(85)
  • Vue路由组件的缓存keep-alive和include属性

    功能:浏览器页面在进行切换时,原有的路由组件会被销毁。通过缓存可以保存被切换的路由组件。 例子:在页面上填好的信息当进行页面切换再转回原来的页面时,原本信息被清空了需要重新填写 功能:切换路由时,保留被切换路由组件。 格式: keep-alive router-view/ keep-

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包