00:00
咱们接着往下说,重定向的代码呢,给大家放在这儿了,打开刚才写的home组件精简一下啊,不用写这么多,刚才只是为了演示问题,这两行不要了,Div也不要了,H3往前动一下,不需要萨了,也不用引入这个了,这个呢也给它删掉好了,干净了。这一小节主要给大家讲的是路由链接的高亮效果,那有的同学说,老师你这不已经实现了吗?你瞧啊,点谁谁就亮吗?这里边儿有一些细节。回到APP组件里面,学过RO5的同学都知道navy link这东西吧,是当你在点击它的时候,它给你加了一个样式的类名,叫做active,我整个页面呢,是拿boosrup写的,在boorup里面实现高亮那个类名啊,也叫active啊,简单来说就是巧了,Ne link加的是active,这边需要的也是active,那可不就实现了吗?那万一要是不一致怎么办呢?比方说我的要求是。
01:04
点谁确实谁应该亮,但是亮的那个类名不叫active,改一下,比方说我叫艾硅谷,那你怎么办呀?来写写啊,首先呢,你得去准备这个类名,那我就直接写在这儿了啊,来一个style,点艾硅谷,那背景色呢,给它来一个随便写一个吧,橙色文字的颜色呢,给它来一个白色好。那由于我引入了第三方的样式,有可能会导致我的样式被覆盖,那所以说呢,我加这么一个东西叫做important,同理啊,给它呢,也复制加一下,好,那我们先验证一下我们的这个样式啊,它能不能奏效,目前呢是没写,肯定就是蓝色,那回到这个APP里边,我临时呢,给这个about加一个硅谷这个样式,好来回头看一下,就变成了橙色背景,白色文字。接下来他就想作为高亮的效果,你得怎么办,稍微麻烦一点啊,哎,这样同学们,我们回想一下五的时候我们得怎么做,五的时候呀,我们是这么做的,用一个属性叫做active class name对吧,一写是不是就OK了,然后你点的时候他就给你加艾特硅谷这个样式了,但是现在呀,不行了,你瞧着啊,咱都不说效果,直接就报错了,他说这个东西我不认识啊,那回来就得麻烦一点,把这个东西给它删掉,RO6里边要求啊,你如果想实现自定义的类名,你得把class name的值。
02:41
写成一个函数,好,那我们就写着函数呗,走要求这个函数还得有返回值,但是咱先别说返回值,咱先说说这函数什么时候会掉,那在这儿呢,我就来一个consolo就得了啊,输出一个666,如果你在控制台上见到他了,那就证明这个函数被调用了呗,好,回来刷新一波啊,你先别考虑这说老师这没了,这没了正常,因为你把样式搞丢了呀,来有没有666,有也就是说初次解析模板的时候,渲染的时候,是不是就已经给你调了一次呀,而且注意以后你点击这个路由链接的时候,它也会帮你调的,你点一下它就掉一下啊走诶当然为啥没点上,你没有那个整个框了嘛,你得点这个about文字啊,来走。
03:30
啊,再点home,再点about,你看你每一次点击路由链接,它都会去掉这个函数的,好,那掉是掉了,动态样式呢,就得靠它的参数,那我们一起来观察一下这个A,好回到这刷新一波,发现A的值是一个对象,里边包含着is active。为帧,为啥为帧呢?因为你的路径是斜杠about,那就是对应这个导航项,那所以说它就得亮,那人家告诉你it's active啊量就完了,那如果这个时候你点击的是home,哎,你注意嗯,是不是false,所以说同学们知道了吧,就得靠这个A来决定你的那个类名,那我直接就解构,直接写这个it'active好,那问题是后边怎么写,哎,就说到了那句话,这个函数得有返回值,你得return written return什么呢?Return类名越写越长,有点写不下了,我把这收一下。
04:28
瑞,那你就得看看他了呗,啊问一下那现在亮不亮啊,他说应该亮,那注意了,你得把原来呀,他这个固定的样式给他写在这儿,顺带着你再写一个艾特硅谷,好,那后边呢,再来一个冒号,啥意思,就是不应该亮,不应该亮你也得把它固定的这个是不是写在这儿啊,OK,这回你写完了,来看一下效果啊,回来点击about,嗯,就是这个样子了。回来写的麻烦了,箭头函数只有一句是不是可以return删掉,那这个花括号呢,是不是也可以给它删掉啊?嗯,OK,那你说同学home那个导航如果也想实现这高亮,你得怎么办?哎呀,就这一堆复制来到这儿。
05:16
整个你是不是都得粘过来,你先别说麻不麻烦啊,反正效果我实现了,一点一点一点是不是可以。那说老师这个重复度有点大吧,的确,那所以说你也可以优化一下,就是呢,定义一个函数名字呢,你随便起啊,我叫这个名字computed class name什么意思呢?计算样式的那个类名,哎,那在这儿呢,他也接收到这个东西,那他也得有返回值,那也得是这一堆呗,给他剪切走往这一写,那接下来去指定样式的时候,就不用自己在这现场写这函数了,直接拿这个是不就可以了?好,那这一堆呢,删掉不就OK了吗?实现了一个复用,对吧?诶,这会要想到好刷新一下走走走走是不是可以了?好,那这一小节呢,我们停一下。
我来说两句