00:00
大家好,我是学习园地的特约讲师高洛峰,下节课咱们看了VIVO的路由的一个初体验,就是如何把我们路由给我们加上来看一下,一共有几个步骤,第一个步骤就是我们一定要安装这个路由,安装路由呢就在这个配置点阶层里边,对吧?我们可以使用NPM,当然我们使用脚尺架自己创建的,对吧?创建的这个路由一定是四这个版本才能够跟VUE3他俩合作,否则的话。只能用,如果用版本低的话是VV3里边是用不了这个的,他俩是合作关系对吧。这是第一个安装,安装完之后呢,我们就得建一个这样的文件夹,但用脚脚架给你建好的,然后呢,写一个音带的JS文件,这样的话,我们这个就是路由的配置文件,那路由配置文件呢,需要有几步,第一步呢,我们一定要引入导入这个路由,导入这个路由,导入这个路由里边的两个方法,创建路由的方法,最重要的是这个创建路由的方法在这块。创建路由,然后呢,把这个路由导出,在创建路由这个实体的时候,我们需要有两个参数,默认现在有两个参数,一个是设置模式,一个呢是指定这个路由的路由映射表,也就是这规则,那路由映射表呢,我们就通过常量把这个数据提出来了,在这里边就是我们有几个页面跳转,相当于页面跳转我们就做几个。
01:13
是这样的。然后我们在哪里边吧,支持接入由,然后我们在创建view的时候,创建view的时候再逐入文件,我们一定导入到这个路由,也就是导入这个文件该加S文件,这是省略了,然后我们用柚使用这个路由,在我们的什么APP里边使用,那APP里边怎么使用呢?也就是在我们的view里边使用,那view里边使用,那我们需要用到两个自带的组件,路由里边自带组件,一个root link,一个root real,这两个这个呢是指定链接地址,当然了我们都可以改变啊和链接地址和样式,就是我们一点击个链接,它自动给我们渲染成A标签,跟我们渲染成是A标签,然后我们点击首页,那会把我们这里边路径里边对应的。呃,页面给我们请求过来,请求过来放哪呢?放到我们root view这里面,当我们点击这个链接的时候,会请求这个路由,会把这个路由的页面给我们放到这里边去,请求个人中心的时候,会请求这个地址,这个路径,会把这个路径对应的组件给我们放到这个路由里面去,是这样的一个过程。
02:15
题,那上节课我们在安装的时候呢,呃,有两个咱们不太,其他的语法咱们都好理解,但是有两个地方咱们还没讲到,咱们先把这这节课先把这两个说了一个什么,一个是我们在音带的JS里边在导入路由的时候。导路由的时候,这个写路由规则的时候,我们当访问某个路径导入什么组件的时候,你看我们有一种是这样的方式,对吧,这样的方式直接我们导入组件。然后呢,访问什么路径的时候,我们就使用什么组件这样的方式,还有一种通过一个import这块,我们相当于是一个什么这个位置相当于我们用的是一个箭头函数,这个函数里边给我们返回,用import给我们返回一个这个组件。对吧,那我们把这个也去掉,我们如果自己单独写,不用上面那个方式啊,我们先不看这个注释,直接写con pointt组件,你看跟上面是一样,那我们也可以用这种方式导入iport,因为我们写个组件一定要引入嘛,对不对?A Bo,然后from从哪呢?
03:16
这个里边的六下边的里边的啊。What,关于引入进来,然后这块我们使用a Bo引入组件,用法是一模一样的,我们运行完之后我们看一下。你看这里边更新一下啊,不应该会自动刷新啊,这没问题,你看。翻一下。没问题的,关于我们个人中心都可以切换,你看地址都可以切换,那不同的路由显示的模板就给我们加载到哪去呢?加载到这个地方对吧,是这样的。那现在那另外一种方式,为什么我们用两种方式呢?我们来看一下使用这种方式它建议的,然后呢,给我加了这么多注释,那我们来读一下这个什么意思,当然呃英文不好的没关系,你刚才说的是什么意思说。
04:00
路由的级别,代码分离的路由级别,什么叫代码?这是分离,你记不记得?咱们解方法SP Li按杠线对不对去分割,我们去分离,把代码分离级别为。代码分离,什么叫代码分?一会怎记得代码分离,然后呢,这块是一个cholk,咱们讲web,嗯,派的时候cholk那种什么cho ID对吧?组合成就打包之前编译成组合一个文件,用哈希命名的一个JS文件,相当于独立出一个JS文件。独立JS文件呢,然后使用懒加载,懒加载就是按需记载,那当我们路由被访问的时候,然后呢,按需加载。按需加在哪一个什么意思。如果我们现在不是用这种,呃,建造函数这种导入的方式,我们就用现在这种方式,你看它把所有的GS,因为我们这里边儿你看虽然我们用有路由跳转,有路由跳转,但是页面呢,并没有刷新,它是一个无状态的。还是在一个页面上是这样的一个结构,对吧,所以呢,他在给我们打包的时候,会给我们打包到一个JS文件里边,我们打包一下,因为我们现在用DV server这种服务器,它相当于在内存里边,你看没有给我们打包成文件,那我们就打包一个,比如说n PM rubild,我们build一下。
05:15
你看使用这种方式打包,他就会给我们打包,当然不是一个啊,那他会给我们打包成类似于就是打包在一起,你不管我访问哪个页面,都把这个GS都给我们加载了,你看我们刷新一下,相当于这样再点看,你看默认是第这个目录对吧,但是这目录他说都可以改变嘛。对吧,这个就过了你看。因为我没起服务器,这个错误是因为我没起服务器,我现在是打包的过程啊,你看打包了这个服文件,你看我们的JS,他默认的给我们打包两个,一个是window,是第三方插件组件的,对吧?超window这个一个JS,一个是APP现在应用的JS,我们现在跳转三个页面,那他都把这两个JS相当于是一个,它现在分成两个给我们打包到我们项目里面去,没有分开,那如果我有100个路由,那个路径跳转到100个页面,相当于那它会把100个中用到的GS。
06:07
都封装到一起,都封装到一起,然后呢,我们不管访问哪个页面,它都是把它G一起加载,不是一加载对吧,所以呢,速度有可能会慢一些,那如果我想把它分开,在打包的时候让它懒加载,也就是我们访问哪个路由,那我们就加载哪个路由,那这个时候呢,我们在访问哪个组件的时候,因为组件里边不有一些GS写特效吗?每个组件里边你看都有写JS的啊地方这个啊这个里边。这个底层加你比如说呃,我们找src下边找到我们的。删了。呃,这里边有里边,这里边每个里边都有这样的script和代码,对吧,那你想如果我们不分开,它都是打包在一起的,现在呢,咱们怎么能把它分开,那我们使用的方式就是在我们这个里边,我们不用这种方式了,不用这种方式,这种方式呢,会把所有JS合到一起去,虽然是分成两个,但是也相当于是合到一起去,因为所有的都得加这两,这两个相当于公共的嘛,你别管是不是第三方的对不对,不管是P的,它都会在一起的。
07:12
因为APP是必须加载的嘛,对吧,主入口嘛,对吧,这是第三方插件的。Window第三方库,那现在我如果用这种方式,那我们每一个上面不是这么单独导入在这里边,比如说home,那我们怎么办呢,用一个。箭头函数,箭函数这里边你不写return,也不写大括号,默认就返回一个引入的一个方法对吧?ID这个是一个方法,但这个注释你可以你可以不写啊,然后我们导入什么呢?导入上一级目录下的video词,下边的home,你看home导入这个,然后呢,我们这个里边这块我也不写。这块直接按上这箭头函数啊,相当于一个相当于加个大括号对不对,Return这个方法没有参数对不对,这是这么写是一回事吗?对吧,只不过是见到见到函数简写的,那我就不多提了,因为前面见到函数的时候重点说过。
08:05
因为你以前那种写代码的习惯没用,所以呢,看这种还不太习惯,没有下边了。这个是关于。然后这个用户我们这块也是同样用箭头函数按。导入这种方式,点点vis下边的用户组件,你看。导入完之后效果是一模一样的,那我这块再运行一下服务器,运行服务器这块,你服务器相当于关掉没有网络对不对。所以我们运营起来。六进起来刷新啊,下面就没了,对吧,你看效果是一模一样的,没有任何区别,效果是认一模一样对不对,但是呢,如果我们打包,我们把这个打包这个文件,我们把它删掉啊,删除删除它,然后我再重新build一下。重新对一下啊。这样的话重新打包,他只有在打包的时候能体现,所以开发的时候你怎么写都无所谓对不对,你看打包的时候他会不会给我们打包成多个JS文件。
09:05
好,我们运行一下,你看第从打包在JS文件里边,你看是不是多了这么多,那命名规则像这说了,比如说什么名,然后哈希这个对不对,你看温这个和APP这是这个,然后我一共三个组件,对吧,三个组件。这里边就分别有三个JS文件,那当我访问首页的时候,给我这个路由,那么会给我们找其中的一个,那当我访关于我们的时候,会给我们找去另外一个,加载另外一个,这样的话就达到了懒加载,访问哪个路由加载哪个GS是这样的一个模式,所以呢,这种模式是咱们用的是比较多的,对吧。就是文件多一些,但是呢,如果页面比较大的话,这样的话我们加载速度也比较快,我会在页面上长时间等待。所以我们通常用这种方式,那我这俩方式能不能结合呢?你看我可以这么写一下。Cost声明一个后。Ho后,然后等于把这个,因为它就是一个段函数嘛,对不对,那把这段函数我们等于这个。
10:03
一个就付给这个常量对吧,这个常量名不就代表这个键盘函数嘛,那我在这相当于调用这个函数哦,这样那不用写括号,相当于直接付给它组件的时候会调这个,那同样我这里边每一个都拿过来,Cost也是一样的cost啊还有A等于把这个拿过来。On。这个位置,然后还有user等于。把这个呢,第三个也拿过来。正好就是A加这个。这个拿过来。然后我们放在这儿。这块我们直接写就写,你看感觉是不是跟那种一样,但是我们文件就分开了。文件就放开了,保存一下,那我们得运行一下才可以啊,得得把服务器写在我们这三个房子。我写了再一下。这增新计划来,你看效果怎么办,效果是一样的,是一模一样的,但是我们现在就打包恢复,我们形成这样独立的JS文件,你有一个什么,有一个路由,有一个路径。
11:11
对吧,加载一个模板,单独模板的GS的所有东西可以打包在单独的JS里面,当然了,你可以去看一下这个里边,当然现在是很少的代码,对不对,所以呢,你看不出太多的东西,你也不用打开去看,你就记得打包在这里边了,就是这个作用。所以这个作为了解,那你以后在加载呃,写路由表的时候,加载模板的时候,就可以用这种方式,而不是用上面直接导入的方式,两种都可以无所谓啊。那你知道原理的话,你就知道用哪个了,如果说那这是第一个咱们要讲的,那第二咱们要讲的就是咱们在写路由表的时候,还有一个。这个咱们都知道对不对,那还有一种呢,是模式切换对吧,有一种模式,如果在V2里边模式切换mode模式history就切换了,那在呃VI3以后呢,要我们用这种方式,那我们首先要了解它有哪些模式,这些模式都干嘛的,为什么有这些模式,你看这个判断大家不理解,我这块给大家稍微介绍一下,你看啊。
12:02
路由是由多个URL组成的,这是大家都看到了对不对,那使用不同URL可以响应导航到不同的位置,但是实际上我们路由在切换页面的时候没有重新请求服务器。那使用起来就像页面有状态一样,因为我们在请求服务器的时候,咱们使用都是HTTP协议,那HT协议是一个无状态的,也就是你请求一个路由,假如说咱请求的后端路由,请求A路由的时候,从你再重新输入地址请求B路由,哪怕是点链接输入到B路由,那相当于服务器端不会进入你客户端的状态,是从同一个浏览器来的,他会认为是两个用户的两次请求,分别各一次请求。这叫无状态,不会记录状态。对吧,但是呢,我们前端路由它不请求服务器对吧,你访问的时候,你看我们请求的时候,就是前端页面变化,虽然我们地址也变化,但是就是一个前端页面变化,看到了吗。就是一个前端页面变化,所以呢,感觉是服务器上记录我们状态一样,其实呢,我们只是切换一下模板,这个切换一下组件在下边显示对吧,你看APP的页面上面还在这块页面根本没刷新没有动对吧。
13:05
所以呢,这是用来记录这样的状态的,所以呢,在这里边我们可以借助于,因为它是浏览器,相当于不是请求服务器重新刷新页面请求过来的这样的一个动作,所以呢,我们就可以进入浏览器里边有个history。就是它里边其实写的就是一个模式,历史模式什么意思呢。就是我们在浏览器里边都有一个什么都有。有时候吧,你那温点history history历史对象对不对,你比如说BA back这个方法我们啥,你看是不是后退了一下,在历史里边对不对,那history历史模式第2GO,我们负一,你看回到上一个,那我们这块还可以什么还可以history第二,比如说go,嗯二现在往前走都可以,但是这个往前走。现在看出它的一个路径啊,来,我们负一能够退回去吧。这是关于页面,就退回一个,那你还可以退回两个,退回三个都可以,它都在,也就是你访问过的页面,它都在我们历史页面里面存着的,所以呢,页面也不会刷新,你在请求的时候,你看。
14:12
在请求的时候,它会从历史页面拿回来,不会给我们刷新,你比如说我们强制刷新一下,你看会出现一个这个中英文切换,这个对不对,刷新才会有这个关掉,你看我点这个。它会有对吧,再点这个。再点那个个人中心,你看我再点为什么就没有了,因为第一次访问的时候,它有相当于刷新了,你再访问的时候,它先未刷新了,在历史页面里边,相当于从那里边给你拿出来,这是历史模式。你看那路由中还有默认的哈希模式,哈希模式呢,你看啊,哈希模式使用标哈希值,哈希的值来作路由的,哈希值作为路由的不好的一点什么呢?就是相当于每个地址啊,它它多个井号。多个井号,它是也是一种默认的一个模式,路由默认的一个模式,咱们为什么现在默认使用的是历史模式,因为咱们在切换的,在呃,使用脚手架创建这个项目的时候,就让我们选择使用哪种模式,当时咱们选择的是不是使用历史模式啊,你如果没选择,如果你单独使用的,它默认的是这种哈希模式。
15:08
对吧,咱选的是历史模式,才有历史模式,历史模式就能把这个井号去掉,是这样的。所以呢,哈希模式是用来指导浏览器动作的,那咱们说那个不同的路由路径是不是用来回指导那个啊,跳到不同的地方,导航到不同位置,不就来指导浏览器动作吗。他对服务器是完全不用的,对吧,支持所有浏览器,这是默认的,那历史模式就是刚才能举例子,在那多对象里边有个history的一个对象里边呢,可以后,然后里边还有呃站往里边加数据加页面都有啊,这我就不你试了啊。了解一下,就这只作为了解啊,没有别的特殊情况下就是这个,然后还有一个这个模式,这持所有第三模式就不怎么用了,就投两个模式,其实第三个模式名还不叫这个叫呃内存外那个模式,我给你看一下啊,我先给你切换一下,你看一下是不是加号,这不这个模式吧,这个模式是我们这是V3里边给你加的一个模式,对不对。
16:00
你看我这边再加一个,让他切换一个CR也T创建web哈希的个模式,看到了吗?引入从哪里引入呢?从这个vuee,呃,VIVO root里边,从咱们这个组件包里边引入了这个函数,用这个方法,那我们通过这个方法来创建一下,你道这模式,我把这个去掉。去掉,然后这块history模式指定通过创建方法的方法,你看改这个模式,那里边我们也用这个,呃,环境变量,那是一个基础的一个路径,那这个框架里边的,因为这个基础路径基础的UR就是这个模式得基于这个基础UR基础上的一个,不然的话就空了。然后括号你看加上这个模式之后,那我们所有的地址栏你看都给我们多了一个井号,关于我们吧,对吧,中心所我们对吧,看上去都不舒服,所以你在地址上如果看到有这样的,那就什么哈希的这个模式对吧,当然我们还是把它切换回来。没有任何必要的时候,咱们就使用这个模式就可以了,其他模式就不用用,你也不用了解,但是呢,咱们既然在程序里边创建的它默认有这样的代码,我就要给你解释一下这些代码是干嘛的,对吧。
17:06
所以呢,这是也是咱们安装这个路由的时候,咱们要了解的,这样的话,你不管怎么变形,比如把这些都删了,你重新自己写一遍,你也知道什么原理了,大概是这个意思啊,模式这块稍微了解一下,还有这个懒加载对吧,这种方式也作为了解就可以了,对这一块并不是作为了解了。因为一般的情况下,我们在做项目的时候就创建,你写对个,其他的就不用怎么改了,没有这些东西不掺杂在我们写业务流程中,只是一个环境的一个配置,了解原理,根据你项目情况去配置一个,有可能你就一直不用去动了,对吧?当然了,我们这个路由规则是得反复写的,因为你页面不可能就这三个页面,有可能有30个,所以一直去写,一直去写,那每写一个都可以用这种方式导入统一的地方引入,对吧?然后再一个一个使用就没问题了。好,谢谢大家,这节课我们就讲到这里,这节课咱们就讲了两个概念,一个呃是懒加载,一个是模式切换,好,谢谢大家。
我来说两句