00:00
好嘞,各位在这一小节啊,给大家讲一个完善路由的技巧,叫做缓存路由组件,用一个功能啊,把这个知识点呢,给它引出来,我想在每一个新闻的后面呀,都写一个输入框,诶我可以往里面呢输入一些东西,好回到代码里呢,我们写一下找到news这个组件啊,每一个新闻的后面都写一个input框,OK,写完了回到这边呢,刷新看一下效果,然后每一个里面我是不是可以输入一些东西啊,比如说新闻一就是一,二就是二,三就是三,然后呢,我切走,我想看messageage,那么等你再回来的时候,各位你发现东西是不是没了呀,为什么呢?我们之前说过,当你切走之后,这个news这个组件被销毁掉了,那组件都被销毁掉了,等你再点的时候,同学,它是不是现挂载啊,现挂载就得拿着这一堆东西生成新的真实盗墓,直接就替换了是不,各位。
01:00
哎,因为之前的销毁掉了吗?没有之前的虚拟道了,没有办法进行diff算法了呀,是不,各位,哎,那这怎么办呢?说老师这不挺好的吗?有的时候我们不希望它这样,就比如说人家辛辛苦苦的输入了很多东西,你想让它切走之后再切回来能保留下来,这怎么办呢?哎,来同学首先呢,我们回顾一下,就是这个news组件,当我在切走的时候,是否真的被销毁了,来马上就验证,在这呢写一个勾子就可以了,叫做before try,然后在这呢,来一个consolo,我就直接说了啊,这个news这个组件,然后呢,被销毁了,其实啊,同学在这里面的输出应该是即将被销毁了,但是我们知道最终咋的啊,肯定是被销毁了一个时机的问题嘛,那精准点写上即将被销毁了啊,最后肯定是被销毁了是吧?来回到这儿看一下效果啊,目前在新闻这啊输入个123,当你切走的时候,各位你看是不是即将被销毁了呀。
02:00
怎么能让它切走的时候不被销毁呢?哎,很简单,各位分析这么一个问题,你说当我点击news这个选项卡的时候,是不是在这儿真正展示的news组件呀?同学,你可别写着写着写飘了,你告诉我这是news组件,各位,这是news的导航按钮,这才是真正的news组件,是不好,那我再问你,News这个组件最终是出现在了哪个组件里呀?说是咋把我们蒙了呢,来同学啊,这是不是home的导航区,这是不是home组件的展示区,然后这是什么呢?哎,News和message的导航区,这是谁呢?示news和message的地方,然后我问你的是箭头所指的这个蓝色框是在哪个展示区里?在哪个展示区,哎,在home这个展示区,所以说各位你写的东西,无论是news还是message,最终是谁的内容谁的,哎,是home的内容,所以说各位回到home组件里去操作,不是在这儿写什么东西,同学你得琢磨一下,就你这个news,就这组件最终是在哪儿展示的,在这儿吧,打开home是不是在这个位置。
03:18
琢磨琢磨,各位来你看,哎,我调一下这目录,你点的是不是news啊,随后路径是不是变成这个样子了,那随后news这个组件放在哪了呀?诶,是不是放在这去展示啊?诶,那你就在这写一个特殊的标签啊,特别好理解,标签的名字叫做keep alive,什么意思呢?保持活跃对吧?哎,别死掉是吧?哎,别这个被销毁,把这东西给它往里边一放啊就可以了,但在这呢,你得需要一个配置,在这写这么一个东西叫做include,什么意思呢?包含,然后呢,你说明白你想缓存哪个路由组件,说老师,那我要不写呢?嗯,那试一下呗,咱不写啊,Keep alive直接包裹上来看一下效果啊,在这123同学看着啊,我把这些东西切走啊,然后呢,我看messages走你,各位,你发现了控制台上没有输出那句话是news将要被销毁,那就证明啊他。
04:18
没有走销毁流程,你回来的时候走是不是东西还在?哎,那同学我跟你说,你在这如果直接使了这个keep alive,那就意味着以后只要是在红色区域这块展示的组件都被缓存,也就是说如果你这儿有十个导航项,那么你嘣儿嘣嘣儿嘣给它点了十次之后,那么这十个路由组件咋的都被缓存下来了,没有那个必要,我们只是把这种要保存着当时真实盗墓里的数据的这些组件呢,给它缓存下来,所以说同学最好在这来一个include,什么意思呢?就是包含哪个啊,不出现在音Lu的里面的同学,那就不去缓存啊,那我这直接写了缓存谁呀?News这个新闻好,回头看效果啊,刷新一波啊,在这输入123,当你切走的时候,各位你看他没有走销毁流程啊,回来东西是不是也在啊,嗯,那么看一下message各位啊。
05:18
来,我把这个勾子呢,给它放在message里一份,就这东西复制找到messageage,然后划到最后写一勾子啊这块呢换叫做message来看一下效果啊各位,我这说的已经很明确了,我只缓存谁news,我不缓存谁啊那个message,那所以说各位你看着啊,重新点刷新一波,把这些呢都清掉啊,我看home,然后呢,我去看这个news是不是挂载了,输入123,当我切走的时候,它是不是没有走销毁流程,但是我从messageage这切走的时候,走你看messageage是不是走了销毁流程,哎,那如果说你不写这个呢,那两个人就都缓存呗,看一下效果啊各位回到这儿,点击后面刷新一波走123切走了news不销毁啊,切回来messagesage也不销毁,但是同学你觉不觉得这messageage你缓存的意义就不大呀,哎,所以说一般来。
06:18
我们在这写上include,哎,等于哪个组件,还有就是值得你注意的是各位,这个东西到底写的是什么名字。现在你有很多的名字,你有组件名对吧?同学打开news啊,新闻这个组件名字是不是叫做news,你还有什么呢?还有路由名呢,对吧?各位啊,虽然在这我没配置,那我要想配置的话,我再给你来一个name,如果我这名字呢,再给他来一个大写的news,那你看你这事儿啊,你就说不清了,到底谁是谁呀,是不?各位啊,来,那把这个呢删掉,直接告诉大家,正确答案就是在这儿啊,你说你要缓存谁,那个名字指的是组件名,组件名组件名重要的事情说三遍,组件名在哪体现在这儿,比如说他叫佩奇,那你在这儿同学就得写佩奇,否则不行啊,来试一下佩奇,OK,回头看效果啊,刷新一波来了,输入123切走的时候你看不销毁,回来的时候东西依然在,是不,哎,千万别搞混了啊,是组件名啊给。
07:28
调回来还叫做news,那这呢,撤回来还叫做news OK,这就是缓存路由组件啊,那看一下我们的笔记吧各位,作用就是让不展示的路由组件保持挂载不被销毁,具体的编码一个keep alive就搞定。值得你注意的是,你得琢磨好你要缓存的那个路由组件展示到哪个里面,你得在这个展示的rot view外侧包裹keep alive,很多同学记混了,在哪包呢?直接在这个结构的外侧包那是不行的,OK啊,那这小节呢,我们听。
我来说两句