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

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

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

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

前言

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

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

正文

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

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

keep-alive

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

<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項(xiàng)加上keepAlive屬性且值為true時(shí),當(dāng)前路由就會(huì)被<keep-alive>包裹,變成一個(gè)可緩存路由,路由配置:

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

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

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

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

<keep-alive>帶來的問題

在項(xiàng)目繼續(xù)進(jìn)行的時(shí)候,出現(xiàn)了另一個(gè)問題,當(dāng)我從選擇地址頁面選擇地址,將地址的id存儲(chǔ)到localstorage中,返回order頁面并在created生命周期中取到id再進(jìn)行接口請(qǐng)求,想要拿到這個(gè)id相關(guān)的地址信息的時(shí)候,發(fā)現(xiàn)接口請(qǐng)求并未發(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)測(cè)試,發(fā)現(xiàn)也沒有東西打印出來,然后我把created改成mounted,依舊是這樣。

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

原因

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

方法一

在需要緩存的頁面中使用路由中的beforeRouteEnter方法,只要跳轉(zhuǎn)到了這個(gè)路由,這個(gè)方法就會(huì)執(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相當(dāng)于this,由于路由守衛(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒被創(chuàng)建,所以直接訪問this是訪問不到的。

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

方法二

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

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

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

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

總結(jié)

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

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

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 拉力机-拉力试验机-万能试验机-电子拉力机-拉伸试验机-剥离强度试验机-苏州皖仪实验仪器有限公司 | 微波消解仪器_智能微波消解仪报价_高压微波消解仪厂家_那艾 | 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 中细软知识产权_专业知识产权解决方案提供商 | 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 制冷采购电子商务平台——制冷大市场 | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 智能风向风速仪,风速告警仪,数字温湿仪,综合气象仪(气象五要素)-上海风云气象仪器有限公司 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | 猪I型/II型胶原-五克隆合剂-细胞冻存培养基-北京博蕾德科技发展有限公司 | 飞飞影视_热门电影在线观看_影视大全| 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 市政路灯_厂家-淄博信达电力科技有限公司 | 电磁流量计_智能防腐防爆管道式计量表-金湖凯铭仪表有限公司 | 礼仪庆典公司,礼仪策划公司,庆典公司,演出公司,演艺公司,年会酒会,生日寿宴,动工仪式,开工仪式,奠基典礼,商务会议,竣工落成,乔迁揭牌,签约启动-东莞市开门红文化传媒有限公司 | MES系统工业智能终端_生产管理看板/安灯/ESOP/静电监控_讯鹏科技 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 太阳能发电系统-太阳能逆变器,控制器-河北沐天太阳能科技首页 | 运动木地板价格,篮球馆体育运动木地板生产厂家_欧氏地板 | 技德应用| 软文发布-新闻发布推广平台-代写文章-网络广告营销-自助发稿公司媒介星 | Maneurop/美优乐压缩机,活塞压缩机,型号规格,技术参数,尺寸图片,价格经销商 | 酵素生产厂家_酵素OEM_酵素加盟_酵素ODM_酵素原料厂家_厦门益力康 | 自动检重秤-动态称重机-重量分选秤-苏州金钻称重设备系统开发有限公司 | 铝合金脚手架厂家-专注高空作业平台-深圳腾达安全科技 | 基业箱_环网柜_配电柜厂家_开关柜厂家_开关断路器-东莞基业电气设备有限公司 | 压缩空气检测_气体_水质找上海京工-服务专业、价格合理 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | Copeland/谷轮压缩机,谷轮半封闭压缩机,谷轮涡旋压缩机,型号规格,技术参数,尺寸图片,价格经销商 CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | TPE塑胶原料-PPA|杜邦pom工程塑料、PPSU|PCTG材料、PC/PBT价格-悦诚塑胶 | 医养体检包_公卫随访箱_慢病随访包_家签随访包_随访一体机-济南易享医疗科技有限公司 | 泰来华顿液氮罐,美国MVE液氮罐,自增压液氮罐,定制液氮生物容器,进口杜瓦瓶-上海京灿精密机械有限公司 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 运动木地板厂家,篮球场木地板品牌,体育场馆木地板安装 - 欧氏运动地板 | SPC工作站-连杆综合检具-表盘气动量仪-内孔缺陷检测仪-杭州朗多检测仪器有限公司 | 广州/东莞小字符喷码机-热转印打码机-喷码机厂家-广州瑞润科技 | 运动木地板厂家,篮球场木地板品牌,体育场馆木地板安装 - 欧氏运动地板 | 山东氧化铁红,山东铁红-淄博科瑞化工有限公司 |