电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue中keep-alive組件的深入理解

瀏覽:97日期:2022-12-03 18:35:12

前言

最近在寫Vue項目的時候,遇到了一個問題,我從A路由使用parmas方式傳參跳轉(zhuǎn)到B路由,然后從B路由跳轉(zhuǎn)到C路由,再從C路由返回B路由的時候,發(fā)現(xiàn)從A路由傳到B路由的參數(shù)已經(jīng)不存在了。

Vue中keep-alive組件的深入理解

正文

我們都知道,vue組件進行路由跳轉(zhuǎn)時,會銷毀當前組件。所以從其他路由返回當前路由時,當前路由會重新執(zhí)行生命周期鉤子函數(shù)。這就導致了上述問題,A路由傳到B路由的參數(shù)沒了。

當遇到這種問題的時候,我們會首先想到,我們能不能讓B路由的數(shù)據(jù)保存下來呢?這就不得不提到Vue的一個組件了,它就是keep-alive。

keep-alive

<keep-alive>包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們。在路由出口加上:

<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>

這樣一來的話,如果在路由配置里的meta項加上keepAlive屬性且值為true時,當前路由就會被<keep-alive>包裹,變成一個可緩存路由,路由配置:

{ path: ’/order’, name: ’Order’, component: () => import(’@/views/order/order’), meta: { keepAlive: true // 需要被緩存 } }

在離開order路由的時候,不會執(zhí)行銷毀操作:

Vue中keep-alive組件的深入理解

可以看到,在返回order路由也就是上述B路由的時候,前一個頁面?zhèn)鬟f過來的數(shù)據(jù)仍然保留了下來。

<keep-alive>帶來的問題

在項目繼續(xù)進行的時候,出現(xiàn)了另一個問題,當我從選擇地址頁面選擇地址,將地址的id存儲到localstorage中,返回order頁面并在created生命周期中取到id再進行接口請求,想要拿到這個id相關(guān)的地址信息的時候,發(fā)現(xiàn)接口請求并未發(fā)出:

created() { this.userId = JSON.parse(localStorage.getItem('user')).userId if (JSON.parse(localStorage.getItem('addressId'))) { this.addressId = JSON.parse(localStorage.getItem('addressId')) } this.getAddress() },

于是我在里面加上console.log(1)測試,發(fā)現(xiàn)也沒有東西打印出來,然后我把created改成mounted,依舊是這樣。

Vue中keep-alive組件的深入理解

原因

由于<keep-alive>所包裹的路由具有緩存能力,所以在路由跳轉(zhuǎn)的時候并沒有銷毀,所以返回來的時候不會執(zhí)行相關(guān)生命周期函數(shù)。那么,如果我需要在返回的時候執(zhí)行例如接口請求之類的操作該怎么辦呢?解決辦法

方法一

在需要緩存的頁面中使用路由中的beforeRouteEnter方法,只要跳轉(zhuǎn)到了這個路由,這個方法就會執(zhí)行,在路由跳轉(zhuǎn)前執(zhí)行相關(guān)操作:

beforeRouteEnter(to, from, next) { console.log(’from’, from) next(vm => { if (from.path == '/selectAddress') { // 選擇收貨地址后返回頁面更新收貨地址 vm.addressId = JSON.parse(localStorage.getItem('addressId')) vm.getAddress() } }) }

vm相當于this,由于路由守衛(wèi)在導航確認前被調(diào)用,因此即將登場的新組件還沒被創(chuàng)建,所以直接訪問this是訪問不到的。

Vue中keep-alive組件的深入理解

方法二

使用activated生命周期鉤子函數(shù),這個函數(shù)在被 <keep-alive> 緩存的組件激活時調(diào)用。

activated () { this.addressId = JSON.parse(localStorage.getItem('addressId')) this.getAddress() },

同樣能實現(xiàn)效果。

這里由于我這個頁面還需要別的頁面跳轉(zhuǎn)過來進行相關(guān)操作,要進行路由判斷,所以使用的第一種方法。

總結(jié)

Vue的 keep-alive 組件可以實現(xiàn)組件數(shù)據(jù)緩存功能,但是使用時要注意,在組件未銷毀時去到當前組件,組件的部分生命周期鉤子函數(shù)不會執(zhí)行。這時可以使用 路由守衛(wèi) 或者是 activated 和 deactivated 生命周期鉤子函數(shù)實現(xiàn)相關(guān)操作。

到此這篇關(guān)于Vue中keep-alive組件的深入理解的文章就介紹到這了,更多相關(guān)Vue中keep-alive組件內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 首页_欧瑞传动官方网站--主营变频器、伺服系统、新能源、软起动器、PLC、HMI | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 长沙广告公司|长沙广告制作设计|长沙led灯箱招牌制作找望城湖南锦蓝广告装饰工程有限公司 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 聚氨酯保温钢管_聚氨酯直埋保温管道_聚氨酯发泡保温管厂家-沧州万荣防腐保温管道有限公司 | 加中寰球移民官网-美国移民公司,移民机构,移民中介,移民咨询,投资移民 | 筒瓦厂家-仿古瓦-寺庙-古建琉璃瓦-宜兴市古典园林建筑陶瓷厂有限公司 | 5nd音乐网|最新流行歌曲|MP3歌曲免费下载|好听的歌|音乐下载 免费听mp3音乐 | 直齿驱动-新型回转驱动和回转支承解决方案提供商-不二传动 | SDG吸附剂,SDG酸气吸附剂,干式酸性气体吸收剂生产厂家,超过20年生产使用经验。 - 富莱尔环保设备公司(原名天津市武清县环保设备厂) | 薪动-人力资源公司-灵活用工薪资代发-费用结算-残保金优化-北京秒付科技有限公司 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司 | 抓斗式清污机|螺杆式|卷扬式启闭机|底轴驱动钢坝|污水处理闸门-方源水利机械 | 上海质量认证办理中心 | 皮带输送机-大倾角皮带输送机-皮带输送机厂家-河南坤威机械 | 山东包装,山东印刷厂,济南印刷厂-济南富丽彩印刷有限公司 | 全自动包装秤_全自动上袋机_全自动套袋机_高位码垛机_全自动包装码垛系统生产线-三维汉界机器(山东)股份有限公司 | 华东师范大学在职研究生招生网_在职研究生招生联展网 | 黑龙江京科脑康医院-哈尔滨精神病医院哪家好_哈尔滨精神科医院排名_黑龙江精神心理病专科医院 | 艾乐贝拉细胞研究中心 | 国家组织工程种子细胞库华南分库 | 电镀电源整流器_高频电解电源_单脉双脉冲电源 - 东阳市旭东电子科技 | 我爱古诗词_古诗词名句赏析学习平台 | 单级/双级旋片式真空泵厂家,2xz旋片真空泵-浙江台州求精真空泵有限公司 | 振动筛,震动筛,圆形振动筛,振动筛价格,振动筛厂家-新乡巨宝机电 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 电气控制系统集成商-PLC控制柜变频控制柜-非标自动化定制-电气控制柜成套-NIDEC CT变频器-威肯自动化控制 | 精密五金加工厂-CNC数控车床加工_冲压件|蜗杆|螺杆加工「新锦泰」 | 粉末包装机,拆包机厂家,价格-上海强牛包装机械设备有限公司 | 卷筒电缆-拖链电缆-特种柔性扁平电缆定制厂家「上海缆胜」 | 钢格板_钢格栅_格栅板_钢格栅板 - 安平县鑫拓钢格栅板厂家 | TTCMS自助建站_网站建设_自助建站_免费网站_免费建站_天天向上旗下品牌 | 上海律师咨询_上海法律在线咨询免费_找对口律师上策法网-策法网 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 宜兴紫砂壶知识分享 - 宜兴壶人 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 横河变送器-横河压力变送器-EJA变送器-EJA压力变送器-「泉蕴仪表」 | 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 冷藏车厂家|冷藏车价格|小型冷藏车|散装饲料车厂家|程力专用汽车股份有限公司销售十二分公司 | 地脚螺栓_材质_标准-永年县德联地脚螺栓厂家 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | 聚丙烯酰胺PAM-聚合氯化铝PAC-絮凝剂-河南博旭环保科技有限公司 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 |