00:00
大家好,我是学习园地的特约讲师高若峰,上节课我们认识了一下,路由分为后端路由还是前端路由,对吧?一共是两个概念,那我们重点呢,现在看的肯定是前端路,如果你做前端开发工程师的话,你不用太关注后端路由,你就知道我们后端路由请求的时候是通过R,就是网络请求里边一个一个去找的,对吧?通过不同的路径对吧,接口我们去找到了,那前端路由呢,这个概念不好理解,你只要因为它不是,虽然地址栏变化,但是地址栏变化并不是在请求服务器,让服务器变化,而是在前端切换页面。那给我们开发的时候还是相当于写多个页面那样的感觉,其实呢,我们写的是组件,它会把组件都给我们,这个是页面级的大组件,组件一,组件二,组件三,组件四,这是页面级的大组件,感觉我们在开发这样一个页面而已。然后每个下边再加载,再引入子组件。是这样的一个关系,实际上它还是一个主流点。所以你明白这个道理,就是我们在切换页面对吧,就跟我们实际请求服务器切换页面是一个概念,但是原理是不一样的,它还是打包在一起的,有一个主流合件不会请求服务器的。
01:10
这就是前端路由,所以呢,路由给我们能带来什么样的一个好处呢?就是我们开发的时候相当于分页面去写,但只是相当于分页面去写,对吧,就因为我们项目是由多个页面构成的。所以呢,路由是一定需要的,但是这个路由呢,又不是。那么又不是,呃,View本身的一个功能,因为它属于V生态里边的,你看在生态系统里边,像脚手架对吧,辅助的路由对吧,状态管理这些呢,都属于跟路由紧密结合,跟那个未有紧密结合的一个技术,所以呢,需要单独去安装,而不是说。这个view里边单独就存在,所以我们得挂载第三方的,就相当于这个路由,因为它是紧密结合的一个关系。所以呢,得需要单独的去安装去使用,第三包你可以直接安装去使用,那咱们脚手架呢,也能帮我们创建,那我们还是用脚手架创建的比较方便,你现在在这里面直接就可以安装啊,因为本来我也想讲一个新知识点的时候,也要创建一个新的项目,回到上一层目录,我们在VE创建一个项目,C创建一个DEMO4的这样的项目。
02:17
创建一个,那在创建脚手架的时候呢,脚手架就能帮我们安装选择路由,就能帮我们安装这个路由,当然我们自己按PM装是一样的啊,它脚手架呢,不光给我们创建完这个路由,还能给我们写出来简单的DEMO,这样的话它是一个标准的官方建一个格式,所以咱用这个,那咱也不用DEMO,用3D模板也不用缺什么,用这种手动创建的这种方式啊。主动充电。手动商店的,这里边其他的我都不要选择。啊。嗯。这个肯定不要了,对不对。W选择版本中的,但是我们一定要选择什么路由v exx,那是咱们后边课程要点嘛,到时候再选,现在用到哪个选哪个,就这选择版本,咱们用V3,所以选择三,然后这里边你看就开始配置我们这个路由了,说使用历史模式。
03:05
对吧,为这个路由使用历史模式,因为我们路由的时候有两种,有在咱们三里边有两三种模式,有历史模式,有哈希模式,那没有特殊情况下都是在使用什么历史模式,所以呢,我们就选Y历史模式。那他说那历史模式和那个什么哈奇模式什么区别,能具体讲介说你就记得选历史模式就对了,全都用这个对吧,你不了解没关系啊,进入主配置文件或者单独配置文件都无所谓吧,这个无所谓,然后保存这个设置嘛,那我们就保存一下吧,保存的名字就叫DEMO公四吧。或者你叫路由的都可以,你下次我们在创建的时候,直接就是选好我们的配置吗,这咱们在创建的时候说过的。这个应该很快就能帮我们创建完,因为我们也没选太多的这个组件,当然里边我好像忘选了那个SS,那咱就不用那个功能了,如果你需要的话,你就去呃重新安装一个,或者是自己用天猫安装一个都可以啊。
04:03
等待充电。好,马上要创建完成,再等待一下。我们开始下载包安装。好,创建完了,创建完了之后,让我们进入这个目录,你在这里边没有这个目录啊,进入DEMO4的目录,然后启动服务,那我们就按照他的做法,按照他说的进入DEMO4,因我们创建的项目是代四,对不对,然后NPM运行服务器s serve VE运行一下。运行一下,然后我们在服务器这块,我们就可以把M3这个。我在这块那几个吧。然后。现在已运行了,就是DEMO4的,你看。咱们先看界面上给我默认,因为是加载路由了嘛,加载路由我们看一下。这个。这话这俩分开啊,你看加载路由了,就会在这个配置文件里边给我们安装到哪里去了呢。
05:02
看一下。嗯,找到。我们的开发这个。这这个不是这个不对,因为什么我你这是DEMO3,我们得找到什么DEMO4 demo4里边你看这个,我把所有的文件先都关一下啊。不然的话现在是太多了,容易看乱了,你看现在是DEMO4下边的,咱们得在这里边写项目里边有什么配置,杰森,杰森里边就会给我们在这里边给我们装上我们的路由,看好这个路由的版本对吧,VE这对吧,Root。就是这样的一个路由就给我们安装上了,所以我们自己单独安装包的时候,你也是npm vouee干扰路,对吧?去安装都是没问题的,装到哪里了呢?你看装到运行时的环境,就生产环境没有在开发环境,像脚手架这些东西都是我们打完包之后不上线对不对?真正上线程序呢,是有vuee这个路由上线之后还需要依赖这个包,所以呢,我们必须装在生产环境下才可以啊,这些脚手家都帮我们装完了,那路由装完了。那路由的功能呢,就跟我们前面做一样,你看他只给我们做两个,一个home,一个什么,一个页面,一个关于页面,这两个你看切换跟我们前面自己做的那个切换这个对吧,是不是一样,但是自己做的切换跟他比不了,为什么比不了呢?你看我们点后的时候,它默认没有路径,点关于的时候。
06:19
你看变化了,所以呢,原理是一样的,它都是在APP里边去引入的其他的组件。原理是一样的啊,但是这块地址变了,那我们还可以直接通过输入地址A,你看。直接切换这个页面。两个都可以。看到了吧,这块那什么是历史模式呢?你看我们这块。后退,后退,后退切换那么多次,都保存在历史里了。看到了吗?可以有历史模式这样的计划,看地址栏在变化,这个地方在变化,这点要清楚啊。那了解了这个路由机制,我们要实现的就是这样,当然在各个地方都可以去实现,对不对,你不光是在这个主导航上页面里边如果需要的话,也可以这样去切换,这都是没关系的,咱们都可以做到,而且呢,后边我们还可以加上一些参数,比如说假设这是咱们有用户路由的话,用户下边的就比如说12345这块,12345这个用户到这个用户的个人中心,那我们都可以去跳转,对吧。
07:14
是不是跟我们请求服务器的那个是很像的,这是他给我默认的装的这个,呃,路由,那我们再看一下。这个包安装完了。然后我们看src,它装完路由之后,会给我们装一个video,这个一个目录,跟我们上节课,咱们自己创建的一件,你看像主页关于页面,用户页面,分类页面,什么内容页面,文章页面,它都提出一个单独的一个大的页面,但是呢,这不是页面,它都是什么,后面VI都是组件,你看VIVO都是点VIVO和里面都是组件,但是我们写在这里边,就当成单独的一个大页面去处理。是这个意思,那小的组件在这里边,你比如说hello,你首页上面引入了一个hello,对吧,这些里边就是这个hello word这个组件。啊,所以呢,我们记住。
08:00
通过路由切换的,当然我们说把这个和这个写到这个里边行不行呢可以。但是呢,我们感觉上去就是不舒服,对不对,那所有写在这里边的都看成是小组件,所有写在这里边都看成是页面级的组件,大页面对吧?所以呢,你不理解路由它是把多个打包在一起的,那你要理解成什么呢?就理解成这都是单独的一个一个一个页面也行,然后通过路由可以切换到不同的页面。那么怎么路由的原理怎么实现的,那一些页面我们怎么改,这是咱们要学习的内容,对吧,你看。还有一个文件夹这个。这里边儿是路由的配置文件,在这里边儿路由的配置文件里边一定要写的就是什么,就是路由表的一个映射,像这种cost它在哪呢?在。下边。这块去引用。就相当于那录表写在这里边是一样,只是一个变量吗?这是历史模式。然后呢,这块把它怎么样暴露出去,导出去,导出去在哪加载的路由,咱这个路这是路由的in带点GS,它不是整个程序的入口文件,它是路由的配置文件,你这么想是路由配置文件,而真正我们要用路由的时候要怎么用呢?真正我们要用路由的时候是在什么。
09:10
这个主方法里面,你看他给我们导入了什么这个路由,然后又给我们干嘛,又给我们。创建的时候,你看创建这个APP的时候,在APP里边要我们使用这个路由,所以在APP里边我们就是应用路由,怎么应用的啊,使用root这个。去应用的,然后有两个对吧。下边是其他的,他需要这么多文件,所以呢,路由在使用的时候。它是分这么几步了,你看啊。安装路由,创建路由,启动路由,你看创建组件,然后创建路由实例,创建路由的映射,然后启动路由,那这些都是固定的写法,你平时写的时候只要写一些固定的语法就行了,不用这些东西把它都记住,都背下来,没有那必要,你只要知道原理,比如自己写过一遍,下次让你再加一个。
10:01
比如加一个菜单项,你知道怎么加对吧,然后用什么模式,这些能处理好就OK了。那现在你看我仿照这几个文件,仿照这几个文件给你写一遍,大写一遍,咱们原来的咱们尽量留着你看,我把所有需要写的我都复制一份。摩西CR为。那复制成一个INDEX1吧吧。我都交这个文件啊,所有的我都交一个这个文件,然后把这个文件删掉。那么。删掉一下。啊,这。然后再这两个页面。是我们,呃,自己随便写的,你叫什么组件都可以,那这两个里边内容呢,那我就直接都删掉了,跟这个没关系。删除号组件我也直接删除。咱们自己去模拟它这个顺序里面,因为这里边没有需要参考的东西,然后hello,这个组件我们也删除。
11:00
就把所有文件都删除一遍,就是这个备份了一下,然后在主程序里边这个我们CTRLCCTRLV备份一下。好。下划线,嗯。这主程序我就取消吧,这个就就不备份了,因为你上面的话整个程序包时了,这个我们还说C。这个引住这个ctrl c ctrl a复制一下。来一个可看。那就可以了。然后我们从头写。写这段我还会删一下啊,你看首先呢,做路由的话,一定要在这个下边新建一个什么。因为下边错误是我删一些文件错的啊,新建一个index的文件JS,这里边一定要叫in的,因为我们在加载路由,找到目录,找目录,它会自动找下边index文件,有起别的名不好使,起别的名不好使,那这是我们最主要的一个路由的一个文件,就相当于我们和这个备份的文件。你看内容是一样的,那在这里边我们需要你看我一行一行给大家给它粘贴吧。
12:02
快点啊,从这个路由里面。从这个路由,这是我们安装的包,对吧,从这包里边儿我们找到两个方法,一个是创建路由的方法,一个是这个方法。啊,所以呢,我们第一步一定要啊,这些东西你不用记,你记住固定的流程就行了,当然在路由里边有多少方法呢,对吧?有很多方法,只不过我们必须用的就是创建路由的方法,这个呢是呃,Web的历史模式,当然里边还有方法,哈希模式,对吧?大家可以参说哈希模式。都可以,然后创建完这个之后,我们这个先先不用,你看只要有这个了,那我们就可以干嘛呀,我们就可以通过这个方法创建出一个路由了。也是画。因为我们导入的是不是创建路由的这个方法呀,从这个包里边,这个包是我们按照NPM包安装的嘛,安装完之后我们需要创建一个路由,创建一个路由,然后这里面有选项。选项里边分两部分,一部分呢是设置模式,在V2里边的模式呢,直接是mod那个对吧,这模式你还不能删,因为我们现在它必须得有一种模式,所以呢,我们放在历史模式,就是你请求过的,它会后退回去,像这种和我们呃,Window对象里边的有个history是一样的,这个对象里边是不是有go对吧,负一,然后有什么。
13:17
有back b CK返回对吧,和这个道理是一模一样的,它就是参考这个原理,那往这个页面里边装,里边有什么push站对吧,也能往我们这里边去追加一些其他的一个页面,它就是通过这个类似于追加的,然后在站里边我们可以取出来。通过go back来回返回啊和请求啊,对吧,那里边呢,还有什么,还有替换的模式,如果替换的话就没有历史了,对吧,替换站如果通过这个替换历史里边就没有了,就把原来的内容给替换掉了,对吧?如果是用push那种最佳的就没问题。然后创建路由,创建路由,如果路由你不是在这这块是一个路由的规则,有一个路由规则,那您可以直接在这块写上这个规则。
14:00
写上这个规则在这里边,如果直接我们建一个呃,这样的一个规则,这个规则写的什么呢?就是路由表,你让用户访问什么样的路径,到哪儿去啊,对吧,你比如说访问pass。这里边儿每一个页面,每一个页面一个什么,一个杰森,假如说我有两个页面,就两个杰森,然后里边指定pass路径,比如说访问home,访问home,我们加载什么组件这块呢?访问pass,比如说访问book a boot,那我们加载什组件是这样的一个规则。啊什么,但是呢,你写在这里边不是不行,创建路由的时候怎么写不是不行,那我们最好把这路由规则写哪去呢。这块你退回来,直接把这个规则我们声明一个变量就可这样比如说cost声明一个RO。TS跟这个一样,R Ross这个规则等于如果我们在这块给它一个数组,那我们把这个变量,那把这个变量放到这来。
15:03
放到这来。对吧,两个如果是一样的,在阶层格式是不是写一个名称,所以把这个删掉,那么我们路由规则就可以写到这个自定义常量里边了,所以在这块它定义到这个自定义常量是这个意思。这个你看跟我刚才写的是一样的,那我把这个。整体的都搬过来吧。你看。整体都转过来。这是路由规则。那里边儿每一个路径都是一个有pass,名字起不起都行,然后呢,加载的组件,加载的组件,然后关于这个加载的组件呢,那我们上面就必须得引入什么,引入这个组件,所以呢,我在下边我得创建两个组件,你比如说在在哪里边大页面级的组件,对不对,那有。嗯,这里边儿假如说有一个home啊,它还叫home,有这样的一个组件home。这里边儿写上。一句话。点位这是。
16:02
这是首页面。这首页面。就随便写写几个字啊,然后我们在这个里边,我们再新建一个。新建一个VE组件,我们叫做a Bo。A大写了A。然后回收。这里边div这一个。这是关于我们的页面,点点点点点点点换一个,那我再建一个,比它默认我再多一个。再新建一个组件,比如说我们叫做user用户组件。比如说个人中心对吧?Div,那我这块就叫做这是个人中心。在这个三个组件建完了,那我想在这里边通过什么路径访问哪个组件,这个只是一个路由的映射关系,那我就需要把这个组件,我说干嘛呀。我们包含进来,比如说A包含什么?呃,包含这个DEMO4里啊,DEMO3里边有零的,这个肯定是包含DEMO4里边的,对不对,上级目下video下边这个,然后。
17:05
Import包含home。组件对吧,然后包含。什么包含?嗯,还有一个优优酷图件,都是在这下边儿包含了,完之后,那我们在这里边就可以写这样的一个模式了。比如说嗯,根目录下是home对吧,根目录下是后,然后加载的组件,就是我们上面的什么这个组件。就是这个组件。这是嗯,关于就是这个,然后加载组件,你看这怎么这么包含的呢,对不对,组件包含的,这没关系,一会儿我再给你介绍一下这个,那我这块再包含一个自己的,你看咱们不还有一个什么优组件的吗。包含一个优组件,先别管这个啊,一会我再给大家介绍这个是什么样的,是一样的,对吧,假如说我们写一个pass这块斜杠user。那这块指示路径,指示路径没有前边的什么,嗯,为什么不叫URL啊,这为什么不叫URL的pass,因为URL它包含协议域名对吧,以及路径参数等等都在一起,而pass呢,那意思就是。
18:12
滤镜就是相当于后边地址端口后边的部分。Pass,所以它起名叫pass,没起名叫ul,然后这里边我们组件com组件包含哪个呢?这里边user包含这个user组件,这样的话我们就。把这个文件写完了,包含组件,先记着,这里边唯一我现在跟你讲的是这样,也是包含组件的方式,它俩什么区别对吧,你看导入的也是上节目录下对不对。那这块导入了,其实上面这块这关于你这块就不用去写了,不用再导入了,下边已经导入了。然后我们写完这个,一定要将这个怎么的暴露出去,因为这主动文件我们创建了一个对象,如果这是一个独立文件,别的地方没用,对不对,所以呢,我们需要把它怎么暴露出去,怎么暴露呢?就像我们这样,直接缺省暴露这个,那缺省暴露出去。
19:04
在这么。以确诊暴露这个,那唯一确诊的是不是把它暴露出去,那我们当然这前面这些也可以啊。我们就可以任意给他改名字了,对不对,当然你也叫那名字就可以了,那这个里边写完了,我们现在用不了,只是写了几个映射的关系,如果我想要这个路由有效,那必须在哪呢?必须在我们的主入口文件里边,在打包的时候得把路由打进来,所以在主入口里边一定要怎么引入这个路由,那他找到这个当前root,其实是找这个目录,你看啊。去找这个目录,默认会找到,后边什么也不写,默认会找in带JS,所以这块相当于是这个意思,这个目录下in带JS。对吧,所以呢,如果你起名叫in,后缀名GS可以省,如果写index的默认index也是可以省的,所以我们不光这个,假如说我们VS或者什么的配文件写的时候,如果叫index。就这么写,如果你改成别的名,那么我们就得手动把那名全引入进来,这样的话相当于继续加载路由过来了,这个路由我们得创建完我们的APP实例的时候,在APP实例里边我们得用到这个路由,然后挂载到APP的下面元素上,是这样的一个关系。
20:12
前面这些我都说了,只是在这块你得加上一个,用上这个路由。那又让这个路由挂在在APP实例上了,对不对,那路由这些地址是不是我们得写链接去。引入啊,去显示这个内容啊,所以我们得在哪啊,我们得在。APP里面也就是这个里边我们得用到。用的,那怎么用呢?我把这个给你去掉。第一个。给去掉。你知道其他的我不去掉,下边就是这几个样式也不能去掉。特别是这个对吧,揭密洞后期我会讲是什么呢?那。如果我们自己直接写的A标签。自己自己写的标签。你是不是写路径对吧,不是不行,但是我们得自己写事件去处理。
21:01
它不用自己标签,在UE这个路由里边,给我们自带的一个一个标签,一定是记得自带的一个标签,这个标签你看啊。在这里边这个标签不能随便起名字,你就叫这个路由令,一定要叫这个。不能叫别的名啊,你比如说我们这块RO。啊有,因为有的时候有R不带R,这个是带R的,呃,因为咱们到服路上这有两个变量,一个是带R的,一个是不带R的。RO当然不是这个变量的啊,那这里边儿假如第一个写上首页。然后我们有三个对吧,有首页有嗯,关于我们,关于我们,然后内容上这样写,然后呢,是个人中心,个人中心。容器三个,那首页的时候,我们应该通过这个吐的方式。
22:00
库到哪呢?这块就指定我们路由映射的,你看啊,我们在路由映射这里边是不是我们点首页的时候,如果我们路径指定这个就会加载后面的件,对吧,所以在这里边。在APP里边我们用这个指定这个路径,指定这个路径点首页的时候,会把这个路径放到哪去呢?放到我们地址栏里边,也会加载我们的模板,后补的模板,那同样关于我们to这块,我们这块是斜杠下ABO。对吧,然后同样这个我们是user。斜杠user us,然后后面这块加个竖线,让你到时候看上去好一些。那现在加载上了,它会自动帮我们,因为这个是自带的组件啊,这个是咱们装这个路由器包的时候,他给我们自带的组件,所以你在这里边找不到,它是在那个GS里边给我们,就是包里边给我带的。所以这个名称给固定,他能够找到这个组件,然后报销出来,他会帮我们把这个标签渲染成A标签。
23:02
你看首页关于我们个人中心,首页关于我们个人中心是不是给我们渲染成什么A标签。那怎么看那个A标签呢。看一样的像对不对,当我们点元素的时候,你看。我们把这块拿过来。Div里边你看。是不是渲染A标签当前页面什么类是什么,对吧,我们用到了这个默认给我们加上这个类吧,那我点关于我们,你看到了关于我们在这块是不是地址变了。地址变了,而且首页上面的类去掉了,你看这块加上类了,对吧,所以我们这块点哪个当前就相当于激活状态,你看样式就变了,个人中心。默认给我们加上这个类了,但是类名我们也是可以改的,但是呢,没有必要改啊,所以他就用这个类名对吧,自动会给我们加上这个类,哪个是当前活跃的路径,它就给我们自动加上哪个类。那可以切换下边这几个类切换对吧,那假如说这个类切换这个类呢,它默认咱们用这个脚手架创建的时候,它也在这块给我们写了对不对,那么假如说我们想激活状态这块,我们用一个,呃,随便找一个颜色,比如说我们用这个,它现在是这个颜色,对不对,我们换成这个颜色。
24:09
这颜色有点看不出来,嗯,Blue吧,蓝色随便写一个,你看个中就是蓝色对吧。那宽度高度样式是不是都可以在这里边写激活的时候对吧。都可以写,你看这里边其他的样式你也都可以去参考,这个源码里边它自带什么类,然后你把它改变都是可以的,但是标签名能不能改成按钮呢?这也都可以,那现在的问题有了,我通过它自带的这个组件可以指定我们导航上面地址也能给我转换,对吧?但是我加载页面的内容没给我们显示呢,你想我们点导航的时候它在哪显示啊,对吧?所以这里边你就得处理。你想在它的导航下面显示还是导航下面显示,它还有一个自带的一个组件,专门用于显示用的,也就是什么,也就是我们这里边儿的root view root视图,也就是加载这个模板,改地址栏,把那模板放到哪个组件里边去,它会默认放到这个组件里边去,当然单标签,我们所有组件单标签是可以加上一个上线的啊,所以它默认包含了两个组件。
25:07
你比如说我在这块显示。那当然这块也可以有些其他的,对吧,HR对吧,宽度我们等于一百百分之。100%这样。你看这是页面。对吧,默认是放到这个下面的。那现在点关于我们。这是关于我们页面个人中心,这是个人中心页面,所以到这儿就实现了上一节课我们做的例子,但是上节课咱们做例子,原理上感觉差不多,都是加载到一个模板里边去执行的,你看。都是加载到同一个模板里边去执行的APP,这里边对不对,但是呢。用路由组件给我们能做到改变的时候,地址帮我们改变,对吧,访问地址的时候,你看这里边我访问user。User,你看。访问地址的时候,这块也能给我们改变,所以咱们自己写是很难写出这个对吧,但是你用GS也可以去通过黑呀去改变这个地址也是可以的,但没有必要自己去写路由器,对吧?因为没有已经给我帮我们加载了一个路由器,所以遇到这样的话,跳转页面这样功能的话,你可以这样去做,开发的时候分页面去写,你也可以去这样去做,这就是通道路由。
26:14
然后还有很多细节,那咱们后边的课会一点点去讲,你比如说什么是历史模式啊,呃,什么是哈希模式啊,对吧,那怎么接收参数啊。对吧,当然这个只是一个,呃。不用太多记的过程,但是你要知道它的流程,知道怎么加功能,怎么去处理,这会这些功能其实就可以了。我们一定要把精力放在哪呢?放在页面设计上和业务流程上,这个只是一个工具。路由器只是一个工具,能帮我们完成我们业务流程中的一部分,能帮我们把开发分成像多个页面去编写一样这样的功能。啊,这里面只是简单了解一下这几个文件怎么引入的啊,怎么加载路由怎么写的,因为说你家默认给我们创建的就是这种模式,只不过我们稍微修改一下,了解一下这样的流程啊,谢谢大家这里。
我来说两句