35_尚硅谷_2种路由跳转的方式.avi原创

好，下面我们要说一下啊，就是并不是我们我们现在点他们就是在进行路由的一个什么呢？叫切换对吧，现在切换是不是都是通过点击链接的方式切换的呀。那我要不是个链接怎么办呢？是不是就不能切换了吗。啊，我们就不能，譬如说举个例子，我现在我在这里，每一个呢，都有一个按钮。对，一个button。点击这个button就是显示当前message的详情。我们本来现在不点链接看到吗？我希望点按钮也有同样的效果。能懂吧，啊，我们先把这个做了啊，再做其他的啊。那也就是说一个怎么回事呢？就是我的这个里面。这里。嗯，OK。哎，我们先搞一个NBSP。

搞一些空格出来啊，搞个按钮出来。来一个什么button，味道好，Button里面查看。可以吧，啊，应该能够出来按钮。点击这个按钮呢，我就能查看对应的消息，就是跟点击这个按跟点链接一个效果。是吧，那首先是不是要给他们。绑定监听是吧。来吧。On等于。好，这个时候我们要去，是不是指定一个。处理的回调函数啊，OK，那这个该怎么算this点，比如说呃。Show detail吧，应该不是message，因为当前的message detail好，这有个问题啊，大家觉得譬如说我把这个写上，你看现在面临一个非常重要的问题。

什么问题呢？我不知道你点的是哪一个。是吧，啊挺烦的，因为我要知道知道一个东西就是这个index。因为有了index，我我才好找东西嘛。懂吧，啊，那怎么办呢？或者说我最终是不是要显示它，显示这个组件，那显示这个直线需要给需要指定什么。是不是需要指定ID啊，说白了就是我到时候是不是，哎，你说我通过GS怎么样去怎么样去指定一个，呃，添加一个指定一个路径的，指定一个路由啊，新的路由啊。就我点击链接大家看啊，来我看给大家说一个事，你看呢。啊，我点击一个链接，实际上是不是加了一个历史记录啊。还记得吧啊，这个除了顶链接的方式，不还可以通过GS的方式操动吗？

刚才大家有没有注意到，我们那个pro里面有一个非常重要的对象叫history。对吧，那黑色里面有一个方法。这什么push？那其实啊，我们可以让大家去，也可以去看一下文档。啊，文档呢，也要稍微的稍微稍微的看，呃，不是这个啊，稍微稍微的看一下。打开文档。找到这里面有一个东西叫什么history。能懂吗？这个history它就有一些方法，Push以及什么呢？His咱其实用过的对不对，用过的语法。那譬如说我们用push，其实我们点链接，点那个路由链接相当于调用了什么。

湘潭于掉了不西。是吧，我们现在已经不是链接了，我是个按钮，那我是不是应该去调用一下push方法来去加入这个地址。什么意思，我刚才写一下大家懂啊，看到this点啊，Pro里面有一个什么history对象，它有一个方法叫push，那push里面传一个pass。那pass了，就这一个，关键的问题就在于我这个里面要指定ID值吧。对不对啊，这个ID值多少呢。是吧，你看链接里面他是不是自己带了。很好，没什么问题，关键我这个。我此时还知道吗？我知道了，他最好最好最好吧，他能够传来，我是希望他最好，这样那就很爽了。对吗？是这意思。关键的问题就是。

他ID了吗？没有咋办呢？就是点击的时候查看的时候，其实在点击了一下，他其实应该知道index的，就是他没传给我对不对。咋办呢？啊，大家看啊，首先你要知道这里面要指定一个什么。是不是指定函数？看着我。啊，我写一个函数里面去调用，哎，不是说不能调，我里面可以调啊。这样。什么意思？来看到啊，OK，这个安克的值是不是应该是函数，我现在是不是函数。是还是不是啊是，那也就是说我一点击是不是会去执行这个函数，这个函数内部执行的时候，会执行谁去是不是执行它。

对吧，那之前他有没有给他传数据。有不传应该我们应该传什么index，我们想要穿ad怎么办？M加ID呗，它形不行，那我们需要的是ID。哎，这是一种如何向毁掉函数里面传参数的办法。再跟大家去说一遍啊，就真正呢，我首先得知道我们这个值应该交给它一个回流函数，一个函数，别管是不是交给函数，它就会调用是吧。那我应该我们平常写写的最多的是这么写。对不对？但这种写法吧，有一个问题，它有一个缺陷，什么缺陷不能传递我们想传的数据。因为你没调嘛，当然你传什么是他定的对不对，懂不懂传什么是他定的，他其实传了一个什么对象。

事件回调函数里面，它传了个什么对象？说白了就是函数调用函数，那个函数不是回调吗？他传了个什么对象，传了个什么东西。啊，疑问的对象啊。事件回调函数。对吧，但是我不需要那个。对吧，我是需要知道我当前点击那一项，它的ID是多少。咋办呢？这怎么解决问题？我现在搞啊，肯定不行。他没有从ID过去，此时应该看得懂吧，B肯定没从ID吧，都没传。怎么样才能传呢？对吧，我先在外面写一个函数啊，你写个大号也行，这个没关系。对吧，里面干嘛呢？里面比如说里面我我不掉行吗？不行，里面你可以掉了。

里面不是可以调，而且是什么呢，必须掉。穿什么？那你看你需要什么就传什么呗。能不能看到，当那个大括号你可以去掉。能看到吧，大括号是可以省略的。这样我们就能够去传递ID了，那此时呢，我们就是去push查看啊，我写一个叫push查看。其实除了push查看还有什么查看方式啊，我们还有一种。叫replace查看。啊，我们这地方来写一个啊。写一个秀，那我这个里面其实稍微改一改就行。也就是说我不用push，我用什么replace，前面我们已经看出来了，Push和replace一样吗？不一样。

啊，不是完全一样，我们来看一下这两个角的质量的区别。好来啊，看一下。搞开一点。好，现在呢，我们先一步步来，我先从about开始吧，从about开始，一步一步过去，接着我点它。好了看到啊，我点一下先点一下查看。看着点啊点他。那你说我回退的效果是什么呢？就是这个要消失。对吧，这个会消失，来看一下是不是走理。有没有看到？好，我来换一种方式。我点一下查看，感觉好像效果差不多。

对不对，现在看的结果跟刚才是一样的嘛，但是区别在哪呢。区别在于回退的时候效果不一样好，这一次回退仅仅是它消失吗？那是什么呢？应该回到60。能不懂，说白了，我们这个DETAIL1是不是把那个message给替换掉了。点一下。能看出区别了吧，那这两者到底需要啊，用push还是replace，得看你的应用效果啊，需不需要回到我点击之前啊就是。根据应用效果来的，有的时候需要用push，有的时候需要用replace会比较好一点。啊，OK，就是这一个好，那我现在点回退是不是都是通过上面来操作的。你就不能我下面搞个按钮来操作一下啊，看一下是什么意思啊。

来个P标签，来个按钮，我们叫回退。嗯，回退，嗯，好了，这个呢，我叫它前进。可以吧，好，这个里面肯定要去加什么。点击进去面对吧，嗯，安等于这个既然就回调就back。吧。那这个安克尼克就叫。什么forward呗，这不是常用的单词吗？是吧，好，来，Back。这好写啊，这个东西倒是非常好写的东西，也用建函数啊。好，把那个也写上。都差不多。好，那这个地方我该怎么做呢？肯定都要通过黑水操作。

对不对，好点什么呢。啊，它应该是不是有一个forward go forward，好像go forward啊，这个不用背啊，你要不记得没关系。我们可以什么？去看文档啊，OK，它是不是有go for啊，确实有个够啊。好，那我们的back呢？那就go back呗，这很好理解是吧，Go back。声音是吧，好了，来，现在我们来去看一下啊。啊，这个他说。呃，这个地方少了一个什么Z点是吧，因为没有这没有这个变量。是吧，嗯。好，看到啊，我们先从这边开始啊，过来。

重点在于啊，出来好。看这里，我先push一下。破下我点回退应该什么效果？他消失嘛，对吧，我要前进呢。他出来呗。哎。没有对不对啊，我们再来看一下我们的这个啊，有有没有问题，好像报错了似的。Do命uncle是不是写错了呀？写时写了个什么小写，那不行，必须大写，他都问你了是吧，好。来啊，看一下。啊，现在我是在60，接着切换到message。啊，接着点一下它。点回退应该它会隐藏点前进呢，出来应该是对的，对吧？啊没有任何问题。

啊，这是这个。那也就是说主要这里面啊，主要说的就是两种啊，两种跳转路由的方式，一个叫push。一个叫什么，Replace。这能不能懂啊，OK，我们的链接，我们的这个路由链接默认用的，实际上本质上用的什么。Push。对吗？啊，OK，但是啊，重点是大家要知道可以用GS，就是通过按钮的方式来进行跳转。说白了通过GS来跳转，而不仅是通过标签来跳转，对吧，你点击标签就像链接嘛，大家知道啊。在啊，如果我要去刷新页面，页面跳转的话。A，标签可不可以？可以吧，点击A标可以，除了A标签就没有别的方式了吗？

我有一个按钮。我想跳转到某一个页面去，我该怎么做呢？那肯定要用GS。对不对，在JS里面如何进行整个页面的跳转。嗯。这个大家估计都不知道是吧。那看着我有一个八。对吧，啊，就是叫页面跳转看到吗？好，我这里面来一个on click this啊。就是就是写个什么好呢。呃，IQ请求一个页面可以吧，好来看到我们这里面呢，写一个方法。这个是啊，跟大家演示一下，看怎么进行页面跳转链接的方式我就不写了，因为那个他都懂。

听说我要跳到百度去？怎么？这是点什么？啊，这个啊，没办法，这里面说到一个啊，window.location。等于。一个例子。呃，百度点。com。能看懂吧，好，我们来看一下啊，行不行对吧，得看一下才知道行不行。这个呗，走你。能不能看到啊，OK，这就是一个基本的啊，进行页面跳转的方式就是通过GS。啊，通过JS进行什么页面跳转，就是window里面有一个对象叫location，它可以指定一个值。

指定一个路径就OK，其实非常简单，就是大家知不知道的问题啊，这个也没什么太大难度啊。大家一定要区别开来啊，路由跳转和页面跳转是两码事。能懂吗？页面跳转是发请求了。对吧？而路由跳转本身有发请求吗？没有。那要路由链接，你能直接搞A标签吗？不能，你要搞A接，那不就是会进行页面跳转吗？啊，刚才大家已经看到了啊。二。那整个这个里面的相关的一些东西呢，就都跟大家说了说啊。这里面我们主要操作了相关的几个东西啊，说一说啊，再给大家总结总结一下，一个是用到了一些标签对吧，最先用的第一个标签我们叫它什么啊，叫什么我就不写完整，叫browse root，就路由器标签是吧，但路由器标签是为两个啊，还有一个是什么哈希。

You。啊，OK，那个地方是不是我的路由链接就多了一个井号啊，啊，就多了一个井号，好用完它以后，后面还用了哪些。有路由器必然会有路由，对不啊，有路由啊，没有没有啊，啊有路由，路由可以包含在哪个里面，Switch里面。啊，因为有多个可以切换的路由是吧，还有一个跟路由对应的，我们是不是有一个概念叫路由链接，对吧，路由链接啊叫什么。有几个可以用的啊，其实第一个是link，第二个是level link这两个有什么区别呢？Never link点了以后，它多了一个class。

他不一点那个当前的那个路由链接不有一个对应的类名吗？我上面可以改对吧，但是link可没有，有的时候需要，有的时候不需要对吧？啊OK，好。OK，还有什么，还有一个。有一个叫自动跳转的。对吧，叫什么redirect。还记得吧啊，Direct，好，这里面呢，一共就这些，因为有的时候我们希望自动能够去看到某一个路由的结果，是吧啊。用的路由组件相关的组件就这几个啊，主要的就这几个，OK，同时我们其他的操作基本上是去取this.props里面的一些东西。

对吧，Pro里面呢，我们现在为止操作两个。一个是match。还记得吧，一个是什么history？黑水的主要是一些功能性的，我们可以去调用它的一些方法，对吧？啊黑水点push。对吧，还有一点什么replace。还有一个什么go back和go forward。这个word其实用的少，但是其实用的少不用并不特别，我们不用记它就是虽是他们是一个体系。明懂吧，这都是功能性的，而这个match里面，我们主要从中得到了什么？对吧，就是说白了如何向路由组件传递数据。对吧，我们是不是通过路由参数的方式啊啊OK。其实还有一些别的啊，还有在这里面还有一些别的语法啊，但是呢，我们现在还没用到，先不讲做项目的时候，我们做项目的时候会涉及到一些其他的一些语法。

啊，那就没有多少了，只有两个，到时候再说啊。在最后再强调一遍，我们在写路由的时候。那几步，第一步。谢什么？是不是要把路由组件给它定义出来，对吧，接着是在路由组件的副组件或者副路由组件里面去写两种标签。对吧，啊link标签或者level link标签。能不能还有什么。Root标写，当然你写的时候有可能涉及到要写什么Switch。对吧，啊OK。就这。起步。嗯，但是大家真正写的时候还是有点小费劲的啊，因为你要去熟悉他的套路。

好，那这个东西呢，路由的部分我就先转这里，剩下的时间啊，下面呢，还有几十几十分钟时间，大家自己先看一看。