00:00
Her,我们使用了Switch来避免这个路由一直往下匹配的一个问题啊,这里总结了一下笔记给大家啊,继续放到了这里面。一个死维器的使用,通常情况下pass和这个component是一对一的一个关系啊,那为了避免它一直往下匹配,我们可以使用死维器,它可以提高路由的匹配的一个效率,也就是说它会单一匹配,当匹配到呃这个pass之后呢,它就不继续再往下匹配了啊,就是我们诶上节课说的这个例子。它匹配到这里之后就不往下进行了,好,那这一块我们再来讲一个新的一个知识点,那先把这些都关掉,同样的去复制一份这个项目。来,先把这个删掉。啊,删掉之后再复制,因为这个东西它比较多。上完之后,哎,这里复制一下,复制一个。零五。哎,这节课我们来思考一个什么问题呢?就是关于这个呃,样式的一个问题。这里写public啊,为什么呢?其实这节课主要说的这个事情,也就是说啊,就是这个public这个目录下面,它这个资源引用的一些问题,因为我们的样式啊,CSS也是放到这个目录下是吧。
01:10
复制好之后,呃,同样的进到这个里面,我去把这个相关的依赖可以安装一下啊,CT在这杠零五,然后呃,使用这个压。或者你使用NPM。因此档。好,这个先在装着啊,我们来看一下我们的这个代码。找到这个。app.gs啊。那现在。等它这个组件诶,装完成之后,我们来运行一下啊,那先把这个没有用的都删一下。已经安装完了,来运行一下。延安。Suddenly。等它运行完成,我们在这个浏览器中。看一下啊,大概是这样的一个效果啊,也是我们最开始啊写的这么一个效果,点击这个导航啊,这边这个路径会切换,然后展示对应的组件的这么一个内容,那现在我要做一件什么事情呢?来改一下这个代码啊,把这个先折叠。
02:08
现在我的匹配的这个路径啊,我要再给它加一个前缀,比如说加一个DEMO的一个前缀啊,大家可能想到,诶,这不就是有点类似于那个二级路由吗?这里我们先不说二级路由的问题,我们就是单纯的先给它加一个前缀,好吧,那这里加了之后在这里也加一下。啊,这个时候啊,已经保存了,我们去浏览器中来把这个删了啊,回这个首页。现在去点这里变成了DEMO,哎,入home是吧,这里点about,它变成了这个DEMO about,然后展示about的内容,看起来是没有什么问题的,那接下来。我来进行一个事情啊,我点这个刷新。诶,大家发现什么问题了。哎,是不是那个bootrap的那个样式没有了啊,这个背景色是我们自己写的样式,它还在对不对,Boop的样式没有了。我们来看一看,那说明bootwap它的样式没有了,是不是在这个网络请求里面没有给我们加载到来,我们再来刷新一下。
03:06
诶,我们看到这个啊boot swap啊这里没有没有可能是因为缓存,那我们按照这个shift,然后点它强制刷新。是不是这里有一个bola,大家可以看到是一个2001个状态,并不像刚才我说的那种情况啊,没有加载到,如果没有加载的话,它应该400,那这是怎么样一个回事呢?好,那在说这个问题之前,我们先来看一个事情啊。看一个什么事情呢。我们先把这个前缀给还原啊,回到一开始能正常访问的一个情况来保存,保存之后把这个给删掉啊,重新回这个首页,现在样式是有的对吧,包括我点击之后也是有的,刷新也是有的,那这时候我们看一看这个啊boot,因为它是走了这个缓存是吧,那其实你不想让他走这个缓存也很简单,你可以按照shift去点这个强制刷新或者说。我们直接对谷歌的啊这个开发者工具进行一个设置,不让他去使用缓存,那在哪设置呢?这里一个小设置啊,注意是这里啊,啊这也有一个,我们是调的是这一行的对应的这个设置。
04:09
点开之后。往下找啊。你会发现。下面有一个啊,就是说网络就是network这一块。这里看到了吗?有一个,呃,第四步开启,就是说当这个开发者工具是打开的情况下,不去使用这个缓存,这样的话它就不再去,呃呃,使用这个缓存走这个304了,那点了点开之后,这时候我们来看我们的network现在还是304了是不是,那这时候我们随便刷新啊,不用按shift,它就不会去再走缓存了,都是2.0了是不是?好,这是正常请求的一个情况下,我们来看一看这个bootrup它的这个地址是什么?那这里是请求的这个地址对不对,也就是说它从这个地址去获取的这个boot up这个文件啊,当然它既然能获取到啊,这个boot up这个文件,诶从这个地址这时候如果我去复制它,我在浏览器中打开也是可以的啊,那回车是不是看到这个boot这个样式了啊。
05:02
行,我们先把这个地址呢,嗯,先给复制一下,找个地方存起来,因为我们要做一个对比看看啊,刚才我们加了前缀,为什么这个bootwap它会丢失啊。来,呃,我把它给放到哪里呢?放到这个里面吧。哎,放到这里面。接下来我们来改一下代码,把这个前缀还给加上啊,我反撤销。加上之后保存去浏览器中来看,回到这个啊首页。好。现在啊,注意啊,我去点它这个样式都是有的,虽然家里前端还是有的,因为之前我们说过,我们这里使用的是这个,呃,前端的这个路由,它是不去发送这个网络请求的。说明这个什么bootla,在我们一开始请求这个首页的时候啊,在我们一开始请求这个首页,它这里bootwa已经加载了,后面我们在使用前端路由进行这个导航的切换,它只是去给我们显示的不同的组件,并没有去发送网络请求啊,所以这个波刷还是还是有效的,对不对,关键问题就在哪,在我们去刷新这个页面的时候,因为我们一刷新页面,它肯定哎会向这个地址啊,重新去发送这个请求,这时候你来看。
06:11
是不是样式就没有了啊,但是很诡异的是这个波样式虽然没有了,但是这里是200是加载成功的,并不是说我们常见这种400啊404啊找不到对吧?404找不到,那这个时候我们来看一看它这个地址,它变成了什么,你会发现诶,它这里多了一个这个对不对,那作为对比,我给大家复制一下。把它给粘贴到这里面啊。好。是不是?把这个取消掉啊。这里是不是多了一个这个DEMO,哎,很明显我们这个地址我们能拿到这个bootwa这个样式,但这个地址就拿不到了,对吧?但是困扰我们的是,如果我们这个地址拿不到这个bola的话,一般按照我们的理解,它应该会展示一个,呃,404说找不到,但是为什么给我们。没有显示404,反而是一个200对不对。
07:00
啊,接下来我们就看一看,你既然是200,那我看你到底给我返回了什么啊,有两种方式,一个是你复制这个地址,你去浏览器中去看,诶还有一种方式,你直接点开它在这个呃,服务器返回到这个这个response里面,这里面去看。来,我们直接先在地址里面去看啊,可以看到他给我们返回了什么内容。返回了这个东西,这个东西有点类似于我们的这个呃首页的代码,是不是通过这里查看源码也发现确实返回的是呃首页的这个代码,就是说public下面。这个index里的他们返回这个东西对不对,那为什么会造成,哎,这个原因下面就给大家分析一下啊,至少现在我们知道为什么我们加了这个路径之后,我们的boot up虽然是200,但是并没有真正的去拿到boot up,而是给我们展示了一个。啊,这个index,这A台面是不是好。接着我来先看一下,哎,我们正常的能请求到的这个情况啊。
08:03
作为对比,我这里再看一下啊。这里是不是请求到了对不对?嗯,而且注意一下,你看我们这里是从哪开始找,从CSS里面开始去找这个boatwap,而我们的boatwa放在哪里呢?就是这个public下面sets没有这个public对不对,那这是因为这个挖它的配置,它配置的我们的网站的根目录就是指向了这个public,清楚了吧,也就是说我们如果直接访问这个,呃,Local host啊,3000他直接就是去访问的,谁访问的这个public这个目录啊,因为这个we pick,它的这个设置会把这个public给我们设置成网站的根目录,对不对?而为什么我们直接去访问这个地址就能出现这个首页呢?是因为诶,我们这个目录下它有一个indexl。如果你的这个目录下如果有index.hl或者index.htm不带L的啊等等啊,这种index的,它都会去默认去展示这个页面,哎,这个之之前大家应该知道对不对,好。
09:01
那么这里就是说。因为哎web配的它的配置,当我们直接访问我们的这个内置的这个服务器,哎,这个是属于这个脚手架给我们开启的内置的一个服务器嘛,对不对,那它的网站的根目录指向的是谁?指向的是这个public目录对吧?又因为我们public目录下面有这个index time2,它会默认去打开index time2,哎,所以给我们呈现的这个哎首页登录效果,哎,当然你去手动你去输入这个in单,你会看到它的效果是一样的,对不对啊啊,既然我们通过这个。啊,我们的这个服务器,然后加上斜杠,呃,斜杠就是说前面已经是代表了public布目录对吧,那我们后面跟上这个,呃,Public布目录下面有的这个资源就可以显示出来,是不是,我们来看一看,这里面还有一个什么资源,还有一个这个网站的图标,我们来复制一下啊,在这里把这个图标给粘贴上,看看能不能访问这个图标是不是也是可以的,那我们接着看这个public下面是不是有CSCS下面是不是有这个public,好,我们来自己去手动去请求一下啊,那我先复制一下这个,这个名字比较长,我复制了已经啊,接着呢,我把这个删了,我去。
10:03
手动输入CSS,然后下面的哎,Bowa.me.CSS是不是也是拿到这个CS了,对吧,好。这是哎web pack,它设置的网站的默认的这个根目录,也就是我们这个public啊,当我们在这个地址栏中,我们哎去输入这个地址,然后后面加上这个啊,我们要请求的这个资源,他就会去帕布里克目录下面去找。看到了吧,当然这都是我们在有资源的情况下,假如我们去请求一个不存在的资源呢,比如说我请求AB下面的啊c.GS没有这个文件吧,你看一下我们public没有A这个目录也没有,B也没有啊,这个目录没有C这点GS没有吧,好,这时候你去访问,你会发现干什么,他也给我们返回了一个首页。对不对,那这这是什么?这其实就是,呃,我们这个脚手架它默认的一个配置,也就是说当你尝试去访问public里面这些资源的时候,如果找不到这个资源,诶,它会默认给我们返回这个,哎,Index。
11:01
哎,我们来检查它的这个源码可以看到啊。他给我们返回到啊,找到这个,来到沃河这里啊,把它清掉。来,我来刷新,可以看到这里我们请求这个c.GS啊,它的地址是A下面B下面c.GS是不是A,当然没有这个资源了,没有资源给我们返回的,谁返回的是不是这个index点你看到没有看到这个root没有看到我们,呃,前面的这些东西没有好你如果明白了这个,那么你就应该明白为什么我这里去请求这个波特斯拉布请求不到对吧,请求不到呢,但是。他还不给我说404,而是给我们展示的首页这个内容,这个清楚了吗?那这个清楚了之后,接下来我们再解决另外一个问题,为什么。这里会多了一个DEMO。来接下来就看一下为什么会多了一个DEMO,嗯,一开始你从这个首页进来,正常的去加载这个波up没问题,是正常的加载到,你可以看一下是不是我们的波F代码,好,我们再点击这个,呃,路由链接进行切换的时候注意啊,它是前端路由,它不会去发送网络请求,所以你看这里没有任何网络请求,对不对,所以这个波它是提前已经请求好的,那啊,我们这里去切换没有问题的,正常显示样式都是对的,哎,一旦我去刷新了这个页面。
12:15
可以看一下啊,样式就丢失了,对不对,而且这个boot strap它的这个地址请求地址也变了,多了一个这个东西啊好,那接下来我来说一说为什么会多了这一个东西,这是因为我们在引入这个Bo stra的时候,大家注意看使用的什么什么点。点是什么?点是相对路径?清楚了吧,好。我们来看一下这个地址,现在我们这个地址是有一个DEMO,有一个home的啊,那我们可以认为其实home是我们啊这个呃,展示的一个内容,对吧,Home哎,是要展示一个内容,然后这个波up呢,因为我们这里使用的这个点,它是相对的点,它会相当于谁相对于它前面的这个地址去去找这个波特撒普。懂了吗?这也是为什么,哎,我们在刷新的时候,会给我们自动在前面去加上了啊这个DEMO,也就是说我们这里是不是用的点,那点点是相对于谁,相对于当前你访问的啊这个组件啊,访问的这个路由链接啊,那当前访问的是谁?是不是home,也就说它前面的这些会自动给我们去补上,就变成了这样的一个地址啊,是不是给我们加上DEMO,哎,所以说我们怎么解决这个问题?
13:22
我们先发现了这样一个问题,接下来就来看一下怎么去解决这个问题,那解决这个问题呢,有三种方式啊,我先说第一种最简单的一个方式,那你说既然是因为这个点,它是使用这个相对路径造成的,那我就不要这个点,我直接从这个根根目录,大家知道我们这个根目录代表什么,根目录是代表从服务器开始寻址,我们的服务器的地址是谁,是不是这个乐获者3000,也就是说他会从这个3000开始去寻找,哎,就是这样的一个情况,大家看一下这样的一个情况,这样的一个地址。是不是和我们之前能正常请求到这个不W的地址是一样的,对不对?哎,这是第一种解决方案啊,直接使用这个根,因为你使用这个根的话,它就表示从服务器的根目录开始寻址,我们服务器的根目录是谁,是不是public,那他从public开始去寻找这个CS肯定能找着清楚了吧啊。
14:10
这是第一种解决方案,嗯,还有第二种解决方案啊,因为第一种解决方案刚才大家也看到效果了,来给大家看一下吧,再好,还是这个地址啊,我把这些没用的就先关掉,还是地址,你不管怎么刷新都是对的,你自己再检查这个,他的这个地址也是对的,因为我们使用的是根,它会从服务器的这个根目录开始去寻找,那我们根目录是public,好。这是第一种,来接着看我第二种,那第二种那既然我们想让他从服务器的根目录也是public去寻找。啊。我们可以怎么办,看上面它是不是其实已经给我们,哎,写了这么一个变量,它就表示服务器的根目录啊,服务器的这个public个目录是不是我们直接这么去写,也可以来保存在地址中,在家在这个浏览器中看一下刷新。是不是都一样的,都是对的,对吧,没有问题吧,啊,那这是第二种解决方案。好,接下来还有一种啊,第三种解决方案。
15:02
这里啊,我们还继续把它改成点,把它改成这个错误的这个情况,我们来看看第三种解决方案,那现在已经没有了,对吧?啊又是因为它是相对路径,它去,呃,按照前面的这个地址去相对的去寻找,哎,所以找不到。我要说的第三种解问解决方案是什么呢?就是这里我们使用的什么,你看一下使用的啊,找到这个index点点GS啊,这里我们使用的什么是啊,不劳惹入的,如果我们把它改成哈西如坦也可以解决这个问题,为什么呢?我们先改了以后看看能不能解决,我再给大家说为什么啊,哈希如坦。来,那你这里改了,这里也要改,这里也要改来。好,刷新啊,那这个我就先把它删掉,重新去找啊,因为改成哈奇数的时候,它会自动给我们加上一个井号是不是好,这时候我们去点,嗯,先把这些清了,这时候你不管怎么点,它肯定是不发送网络请求的,对吧?你看这个是变,然后这个也变,但它不发送网络请求,对吧?因为什么?因为之前我给大家说过,这个井号后面的呀,一般都会被认为是前端的一个资源,想想我们之前写的这些锚点对不对,那井号后面的内容被认为是前端的这个资源的话,它就不会去发送这个网络请求,但是我们这个组件都是可以正常切换的,对不对?好,接下来我就去刷新哎。
16:14
可以发现啊。当我去刷新了之后,他发起这个网络请求了,但是样式并没有丢失,看一下这个波布的地址也是对的啊,而且代码中我们确实用的也是这个点,是这样的啊,但他要是为什么没有丢失呢?还是刚才我那句话,就是说井号后面的这些内容都被认作是前端的资源,不会发送给服务器,那既然不会发送给服务器,那实际上我们请求到服务器,那服务器收到的就是说你请求的这个路径还是它,对吧?那服务器收到的你的请求的路径是他。好,它是相对于啊,这个用点的话是相对路径去寻找,那既然服务器都没有收到,你带着这个前缀,那是不是也就是自动给我们加上这个了,对不对啊,说白了就是说,哎,你不管怎么去刷新页面啊。
17:01
后面的井后面呢,其实都给你忽略了,并不会传到服务器,那在服务器上去加载,去找寻这个BOO这个地址的时候。它相对的是谁相对的其实就是我们提交过来的啊这个地址对吧,因为井号后面呢,是作为前端的资源,不会提交给服务器嘛,对不对,所以这个情况也可以解决,但是呃三种方案嗯,推荐使用哪一种呢?推荐使用诶第一种或者说是这种,一般我们不去去使用这个。这这个哈希如,那为什么呢?其实我们可以去呃看一下,就是说已经在线上运行的一些这个项目啊,比如说。我们来看一下这个美团。注意这个图标啊,你看亮了是不是美团它就是用软写的啊,当然我们这个图标它是红色啊,这个它是这个蓝色那个之前给大家说过,我们这个是属于开发模式啊,如果当我们去把它给变成这个生产环境,就是说部署部署到这个正式的一个环境啊生产环境。它就不会去再显示这个红色的啊,这个后面我们再说。
18:03
往下来随便找一找啊,找一个这个,我们来点点看一下它的这个。路径是不是,哎。然后是这个房子,然后是这个房子的这个编号没有带这个井号吧,对吧,所以我们很少去使用这个韩信路由,因为他看起来确实不好看,对不对,嗯,那所以推荐大家使用什么呢?就使用。哎,这个这种或者说直接使用斜杠啊,直接是从根服务器根目录开始去找,哎,不要使用相对路径,那这种方式是比较简单的,推荐推荐大家去使用好。那这节课我们就说到这里啊,主要解决了这个样式丢失的一个问题,然后给大家啊,其实主要想说的是在你去引入一些静态资源的时候,比如CSCS啊啊,尽可能的去使用啊,这种根目录的形式,从服务器的这个呃根目录开始去寻找,不要去使用这个相对路径,因为相对路径啊,在一些地方它会引起来一些啊意想不到的一些意外啊,就比如之前我们的这个样式丢失是不是好,那这节课先说到这里。
我来说两句