00:00
大家好,这节课我们来看一下页面的跳转,页面的跳转呢有两种方式,声明式和命令式,声明式呢,就是通过跳转的这个组件,我们来进行跳转,那命令是呢,就是通过这个呃,GS的代码啊,我们来进行跳转。我们来写一下。先把。我们注释注释掉的这个路由给打开啊,然后。啊,准备一些东西啊,把这个给删掉。然后这个。用户页面一,那我们就请求这个这个USER1组件,那这个用USER2组件。同样复制一下这个user。买一个U32。这个我们改为USER1啊,为了做一个区分。就是一。把里面的内容改一改user配置,哎。One,然后这个改成user page two。
01:03
接下来。我们来写一下这个链接啊,我们把这个链接写在哪呢?写到这个啊模板里吧。好,我们就假定在这个头部,我们有一个哎导航,我们的链接导航。要使用。这个生命式的,我们得先引入它的这个link啊,这个组件,那这个link组件从哪引入呢?Port link啊,从这个。优米里面啊,引入。引入之后,我们就可以使用这个组件。啊,它有一个突属性,就是我们要跳转到哪个地方。我们这个是。用户一,然后让他跳到这个user里面的这个one。啊,这个路径就是我们定义的这个路由啊,我们这里定义的这个路由。
02:02
好,那再来一个兔。我们让它跳到。用户to。保存看一下。在这里啊,我们。刷新。因为这个首页呢,它没有继承我们的这个模板啊,所以这个链接没有出来,我们去改一下我们的这个路由让。我们的这个首页也用上我们的这个模板。改造一下啊。让他使用。这个。还这个模板,接下来我们定一些子路由。Pass。还是跟,然后这个时候他要使用的这个组件就是。Page里面的index这个组件啊。
03:02
这个重定向的这个我们就删了啊,那我们定义的。呃,这个根请求这根它会用这个对吧,那请求这个user他也会用这个,好,那其实呢,这样的话我们可以把它给。就是把这些给合并一下啊,合并到这个里面对不对,也就是这里面的这些东西。可以给合并到一块儿。那下面这个就不聊了啊,那这个中间键的应用我们啊也可以给它加上。那我再撤销一下,那整个把。把这个都给拿过来吧,啊,都给拿到这里面。只不过把这个给它删掉就不要了。行来保存一下啊。
04:00
给大家折叠一下看一下,其实就是呃,我们匹配这个根,然后去使用这个公共的这个模板啊,接着它有一个子路由,子路由呢,有一个这个根,我们。访问这个index,接着呢又定义了一个优侧的路由组啊去啊,让这个右侧的路由组呢,使用上我们的这个组件,并且它还有两个子路由啊,就是这么一个回事啊。粘贴一下啊,那我把。最后再给它放一个404啊,防止找不到这个情况,哎,这是这样的一个结构,把代码改造一下。接着来访问。现在。这里面就有我们的这两个。导航了对吧,现在我点这个用户一,它会跳到这个这个地方对不对,接着我点用户二会。啊,这个打错了。找一下。我们的这个。
05:00
模板这里啊,这个路由打错了啊t wo这个时候。来,我们回首页重新看一下啊。好点,用户一来到了这个用户一的这个路由点,用户二来到了用户二这个路由啊,并且这个地址呢,也是发生改变的啊,我们再来看看这个配置,如果大家感觉比较乱的话呢,我就先把这个无关的都给删掉。好,那这个404呢,我们也先不处理了啊,怕大家给搞混。啊,这样的话就会简洁一些啊。这个是我们使用。这个声明是使用的是这个link。当然声明是呢,这里面我看他有没有说,其实还有一个呃,Never link。我们在这里继续改一下啊,写个分割线。
06:01
把这个给它复制一下啊。这个注释点。使用这个level。Never link和link有什么区别呢?啊,Never link呢,是啊,专门用作这个导航的这个。啊,这个路由啊,它会给我们自动去加上一个class来看一看。我在这这个页面刷新一下。来清空,现在我点用户二。啊,你这么看是看不到效果的,因为。他是给我们加了一个class的话,现在我们写class样式对不对,但是你如果注意这里的话,我现在点的是用户一,这里是Y,是不是它有一个这个active的一个class,那我当我点这个二的时候,大家可以看到这个二,这个导航它有一个active对不对?一就没有了啊,那我们来写一下这个样式啊。还是在这个模板里面,我新建一个。index.less。
07:02
在这个里面,我来定一个点X。呃,我让他。颜色是蓝色。字体呢,让它大01:22PX。在这个模板里面,我要引入我刚才定义的这个样式才可以。当前目录下的index加好,接下来我们来看一下。刷新一下。哎,它是不是颜色这个这个二,这个颜色是不是变了,看到没有,那我点这个一是不是一的这个颜色变了,我们的这个字体呢,给的有点小,那给大一点给他是33。啊,是不是当前这个一,它就会有这个蓝色,并且字体大一点,那我如果是路由是二的话,那这个二它就会有这么一个class啊,它的这个显示就会。来应用上这个样式啊。
08:00
那这个是ne link和link的一个一个区别啊,Link呢,它不会给我们去自动加那个样式,这个ne link它会自动加,那如果你的样式如果不是这个X,就是你自己写的这个,哎,处于这个。激活状态的这个样式不是active,你还可以去通过它的这个属性去啊,去修改啊。好,那这个是生命式的,我们再来写一个。这个。命令式的啊,那命令式的呢。其实就是通过这个history啊,去使用它的一些API去完成我们的这个跳转啊,这里只是简单的举了一个push的一个参数,那在这个路由。这个里面,哎,我们当时讲这个link的时候。上面啊,上面讲这个页面跳转,讲这个路由的时候,这个跳过的时候说是放到这块一块讲对吧,那这个它举例就比较多,比如说我们在跳转的时候呢,还可以去带一些参数啊,甚至还可以去回到,就是说返回啊,回到上一个路由都是可以的。
09:02
那我们简单的用一下啊。我看看写到哪里。写到。Index这里吧,啊写到index这里。然后先把这个打印删了啊写到这里。我们写一个定时器吧,啊定时器,比如说呃,两秒之后去跳转到某一个地方。定时器呢,我们一般会写到呃,生命周期中对吧。那这个是呃,函数式的一个组件,我们要使用生命周期的话,需要用到一些HX啊来import。USE1。From。React。然后在这个里面我们来写我们的生命周期啊,它是一个函数。
10:01
给上第二个参数,是一个空数组,不然的话组件更新的时候它也会执行。我们在这里写一个定时器set timeout。第一个参数是一个回调函数,那第二个参数是一个时间,我们给个两秒。两秒之后,我们让他去跳转到啊用户一啊,这时候要要借助于这个呃,History对吧,那我们从。五米里面去导入这个history。我们从五米里面去倒啊。之后就可以使用这个history的复习方法,跳到user里面的Y。来,我们来保存在浏览器中运行看一下啊。那我先回到这个首页。我们来看一下,过两秒之后,是不是给我们跳到了这个弯啊,那这个就是我们通过这种命令式的方式来控制这个路由的一个,来控制一个页面的一个跳转,那这是。
11:07
我们常用的两种方式啊。因为有一些情况下是会用到这种命令,比如说我们验证,如果用户没有登录,我们给他去跳转到这个登录,对吧。当然我们可以直接从这个五米这里面去,哎,使用这个history。哎,之前我们在打印这个路由组件的时候,大家可以看到有很多参数,那其中有一个参数呢,就是黑色,也就是说我们可以从组件的属性中,哎,直接去使用这个history,我们来看一下啊,那我在这个。User这里面,哎,这里面还在打印purpose对吧,那我们先看看打印的一个结果啊,好找到conslo这个是我们打印的这个啊,User one这个组件里面的这个purpose大家可以看到是有history这个啊,这个属性的啊,所以说我们不引用的情况下,也是可以直接从purpose里面去。哎,这个使用这个history的,那比如这里我写一个按钮啊,写一个button b啊。
12:08
Button。我要从。In tu u里面去导入一个button BT to from an TD。然后。上面这个写错了,是button。之后来写一个点我回首页点我回。首页,好,那我给他一个昂克里克事件。点击这个事件的时候,哎,我们让它触发一个函数啊,从这个purpose里面点history。哎,点复习让它回首页好。呃,简单的写了一个按钮啊,然后点击的时候会触发这个点击事件,点击事件里面呢,会从这个purpose里面去,呃,使用它的history,然后使用它的方法回到这个首页,我们来验证一下啊,来保存。
13:03
先从首页看首页,因为我们有一个计时器,它两秒之后会给我们啊跳到这个user one对不对,然后在user one呢,这有一个点我回首页的按钮,那我点击可以看到回首页了,对吧,所以说我们在使用这个命令式的跳转的时候呢。啊,有两种方式啊,一个是。哎,你可以从这个五米里面去啊。暴露出来这个history啊,使用这个history去进行跳转,还有一种方式是在这个路由组件里面,从它的purpose里面去使用啊,这个history啊,注意是路由组件啊,你有时候你自定义的呃,一个其他的一个组件的话。你可能就啊不具备这个属性。那这个是关于页面跳转的常用的几种方式啊,这小节先到这里。
我来说两句