vue52 —— keep-alive 和 router-link 以及 actived，beforeRouteLeave

最新推荐文章于 2023-12-21 16:48:54 发布
最新推荐文章于 2023-12-21 16:48:54 发布
阅读量1.3k 收藏
点赞数
分类专栏： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43899694/article/details/103274097
版权
本文介绍了Vue的内置组件keep-alive及其include、exclude属性，用于保留组件状态和避免重新渲染。同时，讨论了router-link在keep-alive中的作用，如何实现特定路由组件的缓存。当从其他组件返回时，home组件依然能保持之前的状态，如消息显示。文章还提及在App.vue和Home.vue中如何配置以达到预期效果。
摘要由CSDN通过智能技术生成

keep-alive 是Vue里的一个内置组件，可使被包含的组件保留状态，或避免重新渲染

两个属性： include， exclude

  • include： 字符串或正则表达式，匹配的组件才会被缓存
  • exclude： 字符串或正则表达式，匹配的组件都不会被缓存

eg. 要设置多个时，加逗号，不能有空格

<keep-alive exclude='User,Profile'> 
	<router-view/>
</keep-alive>
最低0.47元/天 解锁文章
8笔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
vue keep-alive请求数据的方法示例
08-27
Vue Keep-Alive 请求数据的方法示例 Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些...
Vue Router的＜keep-alive＞
wytccc的博客
01-18 148
① 不设置include属性，默认缓存所有在此处渲染的组件 ② 设置include属性，可缓存指定的组件，值为组件名 ③ 缓存一个组件直接传入组件名即可 ④ 缓存多个组件需要利用v-bind方式传入数组
keep-alive包裹路由router-link（vue2 vue3）
最新发布
qq_38040571的博客
12-21 538
一些状态会随着时间的推移而改变，或者页面中包含了一些需要即时更新的内容，则不适合通过缓存来实现。组件来缓存某些页面，那么这些页面在被切出去后不会经历重新渲染，它们的状态会被保存在内存中。但是，当您再次切换回这些页面时，如果缓存没有更新，页面仍然需要从头开始重新渲染。当一个带有缓存的组件被切换出去，它的状态会被保存在内存中，而不是被销毁。需要注意的是，缓存的更新是指在页面从缓存中被取出时，重新调用组件的。是的，如果缓存不更新，并且页面被重新加载，那么页面需要从头开始渲染。，这意味着您希望该组件进行缓存。
Vue-Router中的keep-alive使用（自我理解）
weixin_53874202的博客
03-03 3733
参考：coderwhy老师视频 作用 保持之前页面所选展示内容不被默认内容替换（比如在首页有两个按钮，一个是首页新闻，一个是首页消息，默认展示新闻页面，当点击消息页面后，需要跳转到关于页面，再次点击首页是仍然需要展示之前点击的消息页面内容，而不是一开始默认的新闻内容，这时就需要使用keep-alive来保护跳转前的路由状态不被销毁） 理解构思 需要先通过脚手架创建项目（vue create routerkeepalive） 在Home.vue内部有两个子页面HomeNews.vue和HomeMessage
vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
qq_48617322的博客
09-13 826
vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
keep-alive在路由中的使用
zhangxiaojiong_zh的博客
05-31 1165
路由中keep-alive的使用，也就是将router-view包含在keep-alive中，这样当频繁往复点击多个router-link时,router-link对应的组件不会被频繁的创建和销毁,因为包含在keep-alive中router-view被缓存了起来。即使浏览器刷新，由keep-alive缓存的数据仍旧处于缓存状态； ...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue使用keep-alive保持滚动条位置的实现方法
10-17
在Vue项目中，通常会使用vue-router来进行页面的路由管理。当使用<keep-alive>组件包裹<router-view>时，被<keep-alive>缓存的组件不会在路由切换时销毁，而是会被保留在内存中。但默认情况下，<keep-alive>不会保存...
Vue-router中keep-alive的理解
weixin_40016215的博客
03-08 1080
keep-alive Vue-router的API文档中对于keep-alive的介绍并不多，所以对于初学者来说，可能并不太理解什么是keep-alive、作用是什么，什么时候用，怎么用？所以，通过这篇文章，我为大家详细讲解一下这四个问题。如有错误，还请大家指正，谢谢！ 1、什么是keep-alive `keep-alive`用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这样可以减
vue-router使用keep-alive动态缓存页面。
wjlhanhan的博客
05-25 574
首先，在配置router的地方配置meta。 const routes = [ { path: '/', //首页 name: 'index', component: Index, meta: { title: '首页', myKeepAlive:true, //表示该组件缓存 }, }, ] 然后在含有router的路由出口文件中 <template&
vue路由+配置+实践+keep—alive
qq_47666300的博客
02-11 609
路由配置 npm router 在src中创建router文件夹，在文件夹中创建index.js文件来配置路由相关信息 index.js中定义 //配置路由相关信息 import Vue from 'vue' import Router from 'vue-router' //安装导入的路由 import Login from '@/components/login' import Main from '@/components/main' //1.通过Vue.use(插件)来安装插件 Vu
ONE源代码分析——router2之ActiveRouter
ymaym的专栏
04-29 2095
先看一下超类ActiveRouter。 ActiveRouter
Vue 二级路由+keep-alive 切换时保存组件状态
weixin_43865334的博客
08-16 911
二级路由+keep-alive实现路由切换保存组件状态
router-link的学习使用
小羽童鞋的技术笔记
09-27 686
组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的  标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
vue router结合keep-alive使用导致的问题
lixiaonaaa的博客
01-02 398
使用很简单，在路由显示的位置用keep-alive包裹起来即可 <keep-alive> <router-view/> </keep-alive> 这样每个页面就会缓存页面的变化，但是使用过程中发现，mouted等钩子函数除了第一次进入页面之后，将不再执行，这是因为组件是被放在缓存中的。 这个时候可以使用keep-alive的钩子函数来实现，activated(是再进入这个组件时触发得)和deactivated（是再离开这个组件时触发得） activa
vue的router（二）router-link的replace属性&编程式路由导航&缓存路由组件&两个新的生命周期钩子&路由守卫
weixin_47687315的博客
03-22 1783
1.router-link的replace属性 *给router-link添加replace属性后页签不能后退： 2.编程式路由导航 *作用：不借助router-link实现路由的跳转，让落跳转更加灵活： 3.缓存路由组件 *作用：让不展示的路由组件保持挂载，不被销毁 <keep-alive include='组件的名字'> <router-view></router-view> </keep-alive> ...
router和keep-alive
qq_43145310的博客
04-26 1799
router的使用 this.$router.replace('/home')，无法前进后退。 this.$router.push('/home') 可以前进后退 // 路由的全局对象，包含所有的路由对象 console.log(this.$router) // 当前活跃对象 console.log(this.$route) // 点击函数中router携带参数 this.$router.replace({ path: '/profile', query: {
谈谈vue的路由守卫和keep-alive后生命周期
青春木鱼的博客
12-22 981
这篇文章主要为大家详细介绍了vue路由守卫和keep-alive，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助！
vue-router-keep-alive-helper:Vue.js
05-25
vue-router-keep-alive-...通过使用 vue-router-keep-alive-helper，你可以更方便地控制组件的缓存和销毁，以及在路由切换时执行相应的生命周期方法。这是一个非常实用的 Vue.js 插件，可以帮助提高你的应用程序性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值