00:00
在上节课我们讲了在多级路由中,然后刷新页面的时候样式丢失的问题啊,主要是我们在引入样式的时候使用相对路径造成的啊,然后有三种解决方案,这里给大家做了一个笔记,一起来看一下。在这个脚手架的这个默认配置中呢,啊,Public它是我们这个应用的根目录,所以我们直接在域名后面加上啊这个其他的这个路径去访问的话,其实就是诶从public下面开始去访问,而且如果在public中没有找到这个资源的话,就会默认返回这个index.html。这也是我们,呃,在刷新这个多级路由的时候,哎,样式丢失了,但是那个我们的样式它并没有返回404,并不是找不到这个样式啊,就是因为它给我们返回了,哎,这个你大家怎样听见没有?啊,这是一点。再然后如何解决多级路径刷新,嗯,引起的这个样式丢失的这个问题啊,其实简单的说就是我们不要去使用相对路径啊,因为如果你使用相对路径的话,在这种多级路的情况下,它会相对于这个多级路径去啊,作为它的这个相相对路径去拼上啊,这个它的这个路径啊啊那。
01:18
如何解决这个问题呢?哎,可以,哎就是说在引入这个样式的时候使用这个啊,这个就是说不要去写这个点杠,而写这个杠对吧?那点杠是相对路径,那杠的话,斜杠就是从这个服务器啊,就是从我们的这个应用的根目录开始去寻找吗?这是第一种方式,也是呃,算是最常用的,因为它在各个语言中都是比较通用的啊,都是都是这样用都可以啊,还有第二种方式啊,那不使用相对路径使用什么使用这个啊,Public ul,但是这个呀,它只有这个react的脚手架有,所以你比如说你你换了这个VIVO啊,换了其他的这个前端的项目可能就用不了了,所以推荐使用这个啊,斜杠这个是比较通用的啊,还有一个第三个就是使用这个哈西UR,使用它呢,就会在你的路径里面多上一个井号。
02:06
嗯,不是太美观,而且很少有网站这么去用,嗯,不太不太常用啊,不推荐使用。那这是我们解决这个在多级路径中,我们刷新页面的时候样式丢失的问题啊。这个先关了啊,这节课我们来学习什么呢?我先把这个删了,然后跟大家说学习什么,我们来学习一下。精准匹配和模糊匹配。复制一份。改成零六。那这个名字我用什么命名呢?哎,用这个,等会大家说什么意思啊。复制完之后,哎,还是要进到这个目录里面去安装相应的一个依赖。CD到上一级目录零六。进到这个目录啊,再去安装这个相应的一个依赖。
03:04
好,先让他装着啊,那刚才我说到了这里方,我们要说什么呢?说这个精准匹配和模糊匹配,它是,呃,说的是谁呢?说的就是。在这里啊。点点错了啊,在这个f.GS里面,在这里面这里我们。先把之前的呃,演示这个,呃,多级这个路径的这个先给删掉啊。好,还有一个啊,那我们说精准匹配和模糊匹配,说的是谁呢?说的是哎,我这里去定义了啊,去编写了路由的链接,那这里去注册了这个路由,对吧?当我们。地址栏中路径发生变化的时候啊,会通过这里定义的这个pass去匹配对应的一个组件啊,我们今天要说的就是关于匹配的时候,它使用的是一个精准的匹配还是一个模糊的一个匹配,嗯,怎么说呢,我给大家写一下就是了,比如我这里我编写的这个路由链接是啊about,但是那这里呢,我写的是谁?
04:04
比如说写这个AB对吧。我注册路由注册的是about斜杠斜杠B啊,这个时候我如果去点这个about,我看还能不能匹配到它。因为它也包含包的嘛,好启动一下啊。亚啊,这里呃,稍微提一下,如果你使用亚,就是就一直使用亚啊。就说你使用这个样去安装你的这些包的话,就呃,最好是一直去使用这个样,因为你如果样和NPM去掺着去使用的话,会出现一些问题啊,那造成一些包的丢失,你如果使用NPM就一直使用NPM啊,这里已经启动了啊。我现在来点这个home能正常的显示对吧,接着就是看我点这个about,因为about这里。把它折叠一下。我这里编写路由链接是是是写的about,然后这里我注册路由,我匹配的是about a和B,我看看能不能匹配到啊。
05:00
如果不能匹配到那。它是什么,它说明你必须得,哎,这边你编写的和我这里我注册的必须得一模一样。清楚了吧,啊,这个只是给大家演示一下,那接着呢,我把它给挪一个位置,我挪到这里,我就说我在注册这个路由链接的时候,我注册的谁about啊AB。哎,就是我编写路由链接的时候,编写这个about AB,但是我注册路由,我路由匹配谁匹配about,这个时候我看能不能匹配到啊。来,哎,可以看到已经匹配到了,对吧,那我从从这个里面再给你点一下。哎,Home正常,About也正常,对不对,而且这个路径你注意一下,它是about AB对不对,那说明我们。编写这种的路由链接,而我们注册路由,注册的只是这样一个about,它就能匹配到,说明它是什么,它是一个模糊匹配是不是?对吧,这很明显是模糊嘛,他俩并不完全一样啊。
06:01
接下来我再换一种写法啊,那这个about我不写到这里,写到哪里呢?写到呃,A的后面。写到这里。现在我是编写这个的,路由链接是A。About b,但我注册的路由是啊about,哎,斜杠about,这个时候我们看看能不能匹配到啊。可以看到啊。我想把它给。回到啊这个根目录。回到这个我们项目的首页,重新点home肯定是正常的,来点这个about发现没有了,匹配不到,是不是你看这样匹配不到,那这说明一个什么问题?哎,这是因为啊。我们这个。路由链接哎,他在给我们最终解析的时候,会解析成什么呢?会把它给一个一个的给拆解开,那比如哎这个它就会拆成A啊about和B对吧。而之前我们写的那个会拆为about AB,然后他再去匹配我们注册的这个路由的时候,它是从第一位开始匹配。
07:08
如果只要就是说第一个匹配到了,他就能给我们啊匹配到,他正常的去展示这个组件,如果连第一个都没有匹配到,就比如这种情况,第一个都没有匹配到,他就后面就不再进行了,他就认为这个不符合我的这个需求。清楚了吗?嗯。那这个就是模糊匹配,只要我第一个符合,就是我编写的这个路由链接,我第一个符合我这里注册的这个要求,我就能给你匹配到啊,当然只有第一个后面的你什么东西我就不管了,嗯。好,那如果你第一个都不符合。那就直接我认为就是不匹配啊。这个就是模糊匹配,也是默认的,一个情况下默认就是模糊匹配啊。然后先把这个删掉啊,先让它模糊匹配能匹配到。嗯,模糊匹配呢,有时候并不是我们想要的效果,我们有时候想让他啊,就是说我这里给定义了什么,你这里就给我匹配什么。
08:02
那这时候怎么做呢?你来想一下啊。是谁在匹配,我们这里只是编写了路由的链接,然后通过去点这个链接,引起这个地址栏中路径的变化,对吧,是不是是他们在匹配对不对,是路由器在监听,是他在匹配,那么我既然我不想让他模糊匹配,我想让它精准匹配,是不是他应该有一个属性去支持,哎,设置是否是模糊匹配或者精准匹配,对不对?那这个属性是什么呢?啊,其实我们来打开这个,比如说这个有道词典啊。你去搜一下这个词。我们想让他干什么,是不是想让他就是说准确的去匹配,你搜索这个准确来。我们来看一看。看一下啊,是不是这个单词有一个这个对吧,但是你说其他的也是啊,但是呃,人家去写这个组件,人家就定义的这个属性对不对,嗯。也就是说我一开始我建立这个新的这一课件的这个名字的时候,其实也用到了啊好。
09:03
那么。它就有这样的一个属性去来设置去,哎,是否使用啊,模糊匹配和精准匹配对不对,那它的值是什么呢?肯定是。它是准确的对吧,那我如果给他处就说明我要求你是准确的。清楚吧,好,我把这个也给一下啊。这时候一旦我about开启了准确的这个呃,精准的这个匹配之后。这种路由我们看看还能不能生效啊,我们定义的这种链接看能不能生效。来。啊,其实已经看到已经没有了啊,但是我也给大家演示来从头点一下home可以显示对不对啊,虽然我们开启了这个精准的匹配,但你这里匹配的是home对吧?这里链接是home,然后我这里匹配的home,所以它能显示对吧?即使你开启精准匹配,但这里就不行了,这里about我是定义的,这个链接是这样的,但是我匹配的是about,那我来点一下你看看。是不是就没了啊,就是通过这个属性来控制是否开启精准匹配啊,当然它还有一个,呃,简写就是说你只要加了这个属性就可以了,它这个属性它的这个默认值就是true。
10:12
啊,当然你如果不加这个属性,它默认就是模糊匹配对吧,你加这个属性,这个属性它的默认值是出,也就会说会开启这个精准匹配啊。那最后再来说一个问题,就是说。呃,我们什么时候去?呃,开启这个精准匹配,什么时候用这种模糊匹配,嗯,其实啊,这个也不是说特别去强求你非要用或者非要不用。那你就记住一个一个这个原则就可以,当我们使用这种模糊匹配的时候啊,也能正常使用啊,并没有什么引起一些意想不到的问题,那比如这种情况是吧,我们使用这种模笔也没有什么问题,对不对?啊,或者说哎,我加上这个,然后即使让他匹配到,哎,这种模糊匹配也没有什么问题,这时候我们就可以不去开启这个竞争匹配,对吧?就是当有时候你的这种模糊匹配出现了严重的问题,比如说它到了这个页面,然后我还有其他的这个链接,哎,比如说这样的一个链接也到了这个页面,这个时候我们就去开启这个精准匹配。
11:12
清楚了吧,啊,这个并不是强求的,根据你的这个啊,你写的这个实际情况啊,说影响到了你模糊匹配,影响到了你的这个实际想要的预期的一个效果,那你就开启这个精准匹配,如果对你没有任何影响,那我们使用这个默认的诶。模糊匹配就可以了啊好,那这一课我们就先说到这里啊,主要讲了这个模糊匹配和精准匹配的一个问题。
我来说两句