17.前端路由router-07keep-alive

最新推荐文章于 2024-11-07 19:48:34 发布

weixin_30312659

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量64

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/sunny666/p/11114072.html

版权

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，

由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命

周期钩子函数会被执行

例子：

　　h3标签绑定事件，点击时颜色为红色

<keep-alive>标签包裹要保存进缓存的路由

路由对象：

当切换路由返回时，任然保存之前状态

转载于:https://www.cnblogs.com/sunny666/p/11114072.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30312659

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

再谈 Vue 中使用 keep-alive ：结合 activated & include & vuex & 路由的 beforeEach 动态缓存

gavincz的博客

12-17

860

上次写了一篇关于Vue中使用 keep-alive 的文章，现在看来，只能说是一篇针对 keep-alive 最简单用法的介绍，但往往，这样的用法不能满足实际的需求，因此，结合这次项目开发，我们再来谈谈如何利用 keep-alive 做到动态缓存：项目需求：在项目的众多页面中，有一个 a 页面，同时 a 页面，包含 b、c、d 三个子页面，需求是： 1.当且仅当用户从 e 页面导航到 ...

深入理解与使用keep-alive(配合router-view缓存整个路由页面)

10-17

本文将详细介绍如何配合`router-view`使用`<keep-alive>`来缓存整个路由页面。首先，`<keep-alive>`是一个抽象组件，它的主要作用是将被包含的组件保留在内存中，避免在组件切换时销毁和重建。这在处理那些数据量...

参与评论您还未登录，请先登录后发表或查看评论

Vue【Keep-alive结合路由】

YhWyl527的博客

04-20

162

详细的将代码复制到html文件中记得更改js文件地址 ul{ list-style: none; margin: 0; padding: 0; } li{ line-height: 30px; } <div id="app"> ...

vue单页缓存实现方案分析keep-alive

細水、長流√的专栏

11-27

513

behind vue单页缓存实现方案分析实现前进刷新，返回不刷新的功能，并且返回时可以记住上一页的滚动位置，有两套方案可选方案一：vue的keep-alive组件具体使用如下： <keep-alive max="10"> <router-view/> </keep-alive> 为什么这么使用? 如...

vue实现动态面包屑选项卡缓存（keep-alive）

小耳朵晨晨

04-24

2310

效果：页面缓存使用了keep-alive 在主页中： <transition name="move" mode="out-in"> <keep-alive :include="tagsList"> <router-view></router-view> </keep-alive> </transiti...

vue实现多标签保持页面管理系统

良月零五的码窝

07-21

6624

此篇文章我主要介绍，vue中如何实现多标签页面管理功能，效果如图所示：实现多标签管理功能，对于刚接触vue的新手来说是一个相对比较复杂的功能，实现此功能其实是对vuex、vue-router的综合应用，但是千万不要怕，经验和能力都是在一个个小功能的摸索和实现积攒而来的。希望本篇文章对有需要实现类似功能的小伙伴，有一点点借鉴效果。关于vue-router应用参考： https://blog.csdn.net/sunshouyan/article/details/107016023 关于vuex应用参考

keep-alive不能缓存多层级路由菜单问题解决

11-21

在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层...

router-keep-alive:React路由器组件，真正保持活动组件

04-05

欢迎对router-keep-alive做出React :waving_hand: :house: :cow_face: :pig_nose: 仅支持哈希路由模式！ :backhand_index_pointing_left: React路由器组件，真正保持活动组件安装 yarn add router-keep-alive # ...

彻底搞懂Vue中keep-alive

一只小白奔向大牛的故事

09-23

6792

彻底搞懂Vue中keep-alive的魔法(上) 上一节最后稍微提到了Vue内置组件的相关内容，从这一节开始，将会对某个具体的内置组件进行分析。首先是keep-alive，它是我们日常开发中经常使用的组件，我们在不同组件间切换时，经常要求保持组件的状态，以避免重复渲染组件造成的性能损耗，而keep-alive经常和上一节介绍的动态组件结合起来使用。由于内容过多，keep-alive的源码分析将...

Vue2.0 心法 ==> 第三层：keep-alive 缓存之坑

鹿的迷雾林的博客

11-23

7702

初学vue2.0，发现自己智商不够用啊。最近在路由缓存处又遇到一个坑。由于整个项目是同事构建的，我只负责开发定位监控页。在此处有一个需求，所有路由都要用到keep-alive缓存，而其中一个地图路由不能有缓存。

vue如何动态清空路由缓存，结合keep-alive标签、el-tag标签

BluerCat的博客

08-10

2250

背景：默认进行路由缓存，关闭el-tag标签后，清空该标签对应的路由的缓存，下次打开时，也是默认缓存。 keep-alive是不支持动态删除缓存，所以我们需要通过一些特殊的方法，来实现动态删除路由缓存，top：即看一下this.$vnode的返回值，那些是我们需要的。以下代码写在src文件的index.js里面，看以下你们import Vue from 'vue’写在哪，就写在哪。 //当前路由跳转到下一个路由前，进行拦截 Vue.mixin({ beforeRouteLeave(to,form,ne

vue-element-admin项目采用keep-alive全缓存，删除标签移除指定的缓存

九段刀客的博客

10-28

9431

旧方案存在的问题之前在https://blog.csdn.net/weixin_35958891/article/details/102685382博客中解决了三级菜单无法缓存的问题，但是那个方案是有bug 的就是缓存只在超过20个后才会删除第一个旧的，也就是会同时存在20个页面缓存的情况，除非f5刷新要不然缓存一直都存在。解决思路删除标签的时候将缓存删掉，看了大佬的博客得到启发 https://juejin.im/post/6844903649517240328 代码 ......

vue中的缓存组件（keep-alive)

SevenLee的个人博客

02-28

4188

当我们进行频换切换，不需要重复渲染的时候，比如tab栏切换，就可以利用keep-alive缓存组件，不需要重复加载，也是提高vue性能的一个方式。 keep-alive是什么？ keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。keep-al

Vue实现登录功能

最新发布

qq_47296476的博客

11-07

252

总体来说，这段代码主要负责处理用户登录成功后的一系列操作，包括权限控制、路由跳转、消息提示和加载状态管理。方法用于获取有当前用户权限标识的路由数组，并进行对原路由的替换。方法用于设置递归过滤有权限的路由到 Pinia 的 routesList 中，并缓存多级嵌套数组处理后的一维数组。方法中创建的加载状态元素包含了一组加载动画的 HTML 结构，通过设置不同的类名和样式来展示加载效果。方法中，将创建的加载状态元素插入到页面的顶部，显示加载状态。这些方法共同实现了前端控制路由的权限管理和动态路由添加的功能。

Webserver(3.3)生产者消费者模型

学习历程记录和分享

11-05

318

解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。

vxe-grid ，增加新行，并且定位到新增的行

花花鱼的专栏

11-05

187

vxe-grid新增空行，并且定位到空行位置。

前端react常见面试题目（basic)

警警的博客

11-02

1047

react常见面试题目（basic)

[]简单无废话]前端知识点(HTML+CSS)---IFC

2302_80171619的博客

11-02

217

IFC（Inline Formatting Context，行内格式化上下文）是指在 CSS 中控制行内元素如何布局的一个环境。它主要用于处理行内元素（如 span , a 等）在文本流中的位置和排列方式。IFC 会影响行内盒子的布局，包括换行、行高和文本对齐等。

前端性能优化2

Cwhat的博客

11-06

502

常见问题：首屏速度，白屏时间等。操作速度以及渲染速度。一打开网页时白屏，是因为还需要从服务器那边请求HTML、JS这些过来，加载下来后才有东西渲染首屏速度参考两方面：白屏时间（资源加载时间、首屏js执行）、渲染页面（首屏数据请求、Dom渲染）渲染页面是比较快的，所以大多数时间是花在了白屏时间上，而其中的资源加载时间是占比比较大的。

<div class="router" :data-keepAlive="$route.meta.keepAlive" > <breadcrumb class="breadcrumb" /> <keep-alive> <router-view :key="$route.path"></router-view> </keep-alive>  </div>实现页面缓存，但是我想让$route.meta.keepAlive为true时才缓存改为了 <div class="router" :data-keepAlive="$route.meta.keepAlive" > <breadcrumb class="breadcrumb" />  <keep-alive v-if="$route.meta.keepAlive"> <router-view :key="$route.path"></router-view> </keep-alive> <router-view :key="$route.path" v-else ></router-view> </div>但是缓存失效

07-25

根据您提供的代码片段，您想要实现的是根据 `$route.meta.keepAlive` 的值来决定是否缓存 `router-view` 组件。在您的修改中，您想要在 `$route.meta.keepAlive` 为 `true` 时才缓存 `router-view` 组件。根据您的描述，缓存似乎没有起作用。有几个可能的原因导致缓存失效： 1. `$route.meta.keepAlive` 的值没有正确设置为 `true`。请确保在路由配置中正确设置了 `meta` 字段，以及在对应的路由对象中将 `keepAlive` 设置为 `true`。 2. 使用了相同的 `:key`。在您的代码中，`<router-view>` 组件和 `<keep-alive>` 组件都使用了 `$route.path` 作为 `:key`。这会导致两个组件具有相同的 `:key`，从而导致缓存失效。您可以尝试将 `<keep-alive>` 组件的 `:key` 设置为不同的值，例如使用一个固定的字符串。下面是您修改后的代码片段，我对其中的一些地方进行了注释，希望能帮助您解决问题： ```html <div class="router" :data-keepAlive="$route.meta.keepAlive"> <breadcrumb class="breadcrumb" />       </div> ``` 请注意，根据您的实际需求，您可能需要根据不同的情况来使用不同的缓存策略。以上代码片段提供了一种思路，但具体实现可能需要根据您的项目结构和需求进行调整。希望这能帮助到您！如果还有其他问题，请随时提问。