vue中 keep-alive 结合 transition 使用（已解决）

最新推荐文章于 2023-08-29 15:29:16 发布

漫步星空ZL

最新推荐文章于 2023-08-29 15:29:16 发布

阅读量7.6k

点赞数 2

分类专栏： vue javascript html5

本文链接：https://blog.csdn.net/a13706935773/article/details/90082275

版权

javascript 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

<div>

<keep-alive >

<router-view :class="homeClass?'child-view ss-keep':'child-view1 ss-keep'" v-if="$route.meta.keepAlive"></router-view>

<router-view :class="homeClass?'child-view ns-keep':'child-view1 ns-keep'" v-if="!$route.meta.keepAlive" :key="'time'+new Date().getTime()"></router-view>

</keep-alive>

</transition>

</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

漫步星空ZL

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - 解决报错警告＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.Use s

王佳斌

07-30

1471

vue3，警告，报错，vite，router，路由，router-view，销毁，transition，过渡动画，keep-alive，缓存，问题，在vue3项目中，浏览器控制台警告，

Vue-Router中使用keep-alive及在transition中的动画过度问题

Kyoku0604的博客

11-09

3129

当我们使用Vue来回切换页面，并希望保持页面组件状态的时候，会用到Vue的keep-alive抽象组件。以下为官网中的说明: <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。这里注意，必须包裹动...

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

vue组件 keep-alive 和 transition 使用详解

01-19

1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 // 组件 export default { name: 'test-keep-alive', data () {

【Vue实用组件】组件缓存块 (keep-alive + transition)

時陨星的博客

11-02

765

【Vue实用组件】组件缓存块。简化版 keep-alive + transition，仅使用 key 定义需要缓存的组件，并且可以加入过渡效果。

vue3中keep-alive的使用及结合transition使用

最新发布

关注最新技术问题并持续维护更新

08-29

2169

# 正确用法 1. 在组件中使用（这里结合了 transition 内置动画组件） ```javascript

keep-alive vue的路由缓存及transition动画(keep-alive新方式include~)

Baby_加油_的博客

04-24

4047

在vue项目中，尤其是h5制作的app，来回跳转的时候，有的地方需要做缓存，一来防止页面重复加载同样的数据造成服务器压力，二来防止页面重新加载造成卡顿，影响客户体验，今天，小闫就工作问题来帮助大家理解vue-router的缓存 - keep-alive 1. <router-view> <router-view> 组件用于渲染路径匹配到的视图组件。渲染的组件还可以内嵌自...

Vue中keep-alive 实现后退不刷新并保持滚动位置

10-15

总结来说，Vue中的`<keep-alive>`组件结合`activated`和`deactivated`生命周期钩子，可以实现后退不刷新并保持滚动位置的效果。同时，通过路由的`meta`属性，我们可以灵活控制哪些组件需要被缓存。通过这样的方式，...

示例vue 的keep-alive缓存功能的实现

01-19

本篇文章主要介绍了vue 的keep-alive缓存功能的实现，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 <keep>是Vue的内置组件，能在组件切换过程中将状态...

Vue3——第十一章（内置组件：KeepAlive、Transition、TransitionGroup）

why404

01-11

1835

Vue3——第十一章（内置组件：KeepAlive、Transition、TransitionGroup）

vue中vue-router、transition、keep-alive结合使用

Null_Bugs的博客

03-27

2741

<transition :name="name"> <keep-alive> <router-view class="router-view" v-if="$route.meta.alive"></router-view> </keep-alive></tr

vue中 keep-alive+transition+router-view使用

CHAOFAN1996的博客

08-20

3758

学习vue的一周里，记录下比较实用的东西。在使用vant组件库时，发现了List列表组件，官网文档解释的比较详细，感觉挺好用的。后来希望可以在列表页加上一个缓存，这样来回切换页面就不需要重新刷新列表，由于我在router-view上已经套过动画标签如下： <transition :name="transitionName"> <router-view ...

Vue 源码深入解析之 keep-alive、transition 和 transition-group

浮生离梦的博客

06-24

1613

一、 keep-alive 的理解在我们的平时开发工作中，经常为了组件的缓存优化而使用 <keep-alive> 组件，但很少有人关注它的实现原理，下面就让我们看一下。内置组件，<keep-alive> 是 Vue 源码中实现的一个组件，也就是说 Vue 源码不仅实现了一套组件化的机制，也实现了一些内置组件，它的定义在 src/core/components/keep-alive.js 中： export default { name: 'keep-alive,

vue3 router-view keep-alive Suspense transition 共同使用

qq_36287830的博客

07-27

1409

vue3 解决 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. router-view keep-alive Suspense transition

vue内置组件 transition 和 keep-alive 使用

weixin_30698527的博客

10-19

268

1.transition name- string，用于自动生成 CSS 过渡类名。例如：name: 'fade'将自动拓展为.fade-enter，.fade-enter-active等。默认类名为"v" <transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元...

vue开发APP 使用缓存 keep-alive以及切换页面动画transition

weixin_39875208的博客

08-20

236

<transition:name="transitionName"> <keep-alive:include="keepAliveNames"> <router-view></router-view> </keep-alive> </transition> //watch$route决定使用哪种过渡 '$route'(to,from){ con...

vue3.0 keep-alive的实现与坑

zy991315的博客

06-20

177

vue3.0 keep-alive的实现与坑

Vue之keep-alive细节

玉案轩窗的博客

07-23

997

前言 keep-alive组件是Vue的内部组件，Vue官方对于keep-alive的描述是：keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行

transition使用

08-18

transition属性可以用于为元素的某个属性添加过渡效果，使其在状态改变时平滑过渡。transition属性需要指定过渡的属性、过渡时间和过渡效果。以下是使用transition属性的示例： HTML: ```html <button id="myButton">点击我</button> ``` CSS: ```css #myButton { background-color: blue; color: white; transition: background-color 0.3s ease; } #myButton:hover { background-color: red; } ``` 在上述示例中，按钮的初始背景颜色为蓝色，并且为其添加了一个过渡效果。通过在transition属性中指定`background-color`作为过渡的属性，`0.3s`作为过渡时间，`ease`作为过渡效果，即可实现按钮背景颜色的平滑过渡。当鼠标悬停在按钮上时，通过:hover选择器，将按钮的背景颜色设置为红色，这样就会触发过渡效果。除了背景颜色，你还可以使用transition属性来控制其他CSS属性的过渡效果，例如：opacity（透明度）、width（宽度）、height（高度）、transform（变换）等。请注意，transition属性可以同时指定多个属性和不同的过渡时间和效果。可以通过逗号分隔多个属性值，例如：`transition: background-color 0.3s ease, color 0.2s linear;` 这样，多个属性就可以在不同的时间和效果下进行过渡。