前言
最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了。
正文
我们都知道,vue组件进行路由跳转时,会销毁当前组件。所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数。这就导致了上述问题,A路由传到B路由的参数没了。
当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-alive。
keep-alive
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
在路由出口加上:
<div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>
标题名称:Vue中keep-alive组件的深入理解-创新互联
分享URL:https://www.cdcxhl.com/article28/cepdjp.html
成都网站建设公司_创新互联,为您提供App设计、面包屑导航、小程序开发、商城网站、网站制作、网页设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联