44_尚硅谷_Vue_编程式路由导航

好，最后一个呢，我们叫编程式路由导航。啊，在说编程是路由导航之前呢，啊，你得先知道啊。是个编程式，这是啥意思是不是。来得说一说，大家知道啊，我来说一下，我们先说一下以前学过的一个知识，叫页面跳转啊，一个是A页面，一个B页面，我要从A页面跳出来B页面啊，有两种做法。哪两种做法？那一个肯定写A标签。对不对，假设我没有A标签，我就是个按钮了。那我一个按钮，我想从A页面跳到B页面，我该怎么办呢？那肯定是要给他加点监听，通过GS的方式去实现页面跳转。其实这种就叫编程式，这个编程指的是你写GS，那以后在他眼里你写页面，写这个标签都不算编程。

啊，太low了是吧。啊，他所说的编程式路由导航什么概念？通过你写GS代码来实现路由的什么跳转？那现在回来啦。你不能不知道啊，怎么一个按钮，我想从A页面跳到B页面，我该用GS怎么跳？怎么样？没用过呀。干嘛了？啊，有几种方案用是肯定是他这人说了open，其实更多的不用open啊，用什么用。这不知道吗？譬如说我写个B点点吧，那就跳到B页面去了。

啊，OK。就是这个地方，就等于的是一个什么呢？Ul。这个U可以是个绝对路径，也可以是个什么相对路径啊，不定位的意思吗？啊，其实完整写法就是完整写法，应该是可以这么写。OK，但是这么写不简单嘛，是吧？啊大家一定要知道啊，怎么跳转页面啊，这个是大家要知道的啊，温柔点的可以写。OK。好，现在大家应该能理解什么叫编程式导航了吧？啊，编程导航好，那也就是说我们现在怎么样通过GS来实现路由的跳转？啊，最终来看这里。我们最终的效果里面不有几个按钮吗？对不有几个按钮的。

好。大家要知道啊，我们路由的基本原理是什么，就路由是如何实现的。对不，这个地方其实路由的时间呢，有两种方式啊啊，一种是这个东西，这个东西你知道还记得是一个什么概念吗？哈希。啊，这在H5之前的一种方式啊，通过改变路径的哈希值。来去实现啊，历史记录的保存，就是说我们一旦改变了，开始这个浏览器的历史记录给他什么。是不是记录下来了，记录下来，而且浏览器还可以监视这个改变。这个就非常重要，你可以改变哈值，同时它还可以监视。监视起什么作用呢？你想想看，监视就能知道你当前哈希值是多少啊？

有了这个哈希值，我是不是就能得到你哈值里面包含的路径，有了这个路径，我是不是能找到对应的路由组件。找到对应的路由组件，我是不是可以拿出来显示？关于路由的基本原理，大家是必须要知道的啊，语法的东西大家都可以啊忘，包括大家现在很可能把那个相关的那些。路由的东西都忘的差不多了啊，这个都很正常，没事。啊，非常正常啊，你你要懂了这些基本道理，再去看文档，你是能学会的。你肯定能学会，就为什么学的好的同学，他他他也忘，他不能不忘，但是他心里很有理，我这东西我都会。啊，这好像又在买汰那些觉得不太好的，这你不要你不要想啊，你就我就说他没有说你啊OK，其实你可以去问那跟那个学的好的同学交流，你说你说他旺不旺，他肯定忘啊，因为我也这种体验啊，我也忘OK旺是一个共性。

好来啊，这个地方啊，还这是说的是哈希的这种方式，其实我们现在用的是哈希的方式，还有一种方式是H5里面新推出来一个API。啊OK，呃，它推出来是不是什么叫呃get state和set state啊，一个state状态的方式，其实跟我们的这个S前面的这种哈气的方式很类似。啊，而且它还有这里面有两个概念和解啊，两个概念一个叫push，一个叫replace。这个也要必须理解啊。这个要说清楚，他别闪到，就是浏览器需要管理你所有访问过的那个路径，对吧，那个状态，那怎么样去知道所有的呢？那肯定要存起来嘛。

对不对，你要存多个东西，应该是不是用一个容器。对不，那这个容器啊，就涉及到首先用对象还是数组。马上想啊，我们怎么样选择对象数组？有没有顺序。我们访问过的那些路径有没有顺先后顺序？咋没有了回退不能让回退啊，对吧，肯定不能骂，所以他必然是有先后顺序的，对不对，好有先后顺序用，还有一个它用宿主的话，哎，这个地方宿主有两种特别的宿组。啊，两种特别结构，一个叫链表，一个叫队列，啊不是应该一个叫队列，一个叫站。那都不能说列表，现在不说列表啊，一个叫站的结构，一个叫队列的结构，这个应该也说过了吧。

说过吗？没有啊，这个也是必须知道的。啊，OK。也就是说数组是一个基本的啊序列的结构，在这个序列结构上，我还可以继续的包装成两个特别的结构，一个叫站，一个叫队列。啊。队列，大家想想就排队嘛，排队是个什么特点？啊，OK大，譬如说现在啊，有同学来找我，是不是前从前往后走对吧，那也就是说先过来同学是不是最先找到我那出来对不对，那也就是有个概念啊，有几个概念叫先进先出。能懂不先进先出能听懂吗？啊，OK，就相当于我这是一个啊，这是一个队列的结构是吧，我外面有很多人啊，先随便下掉牌子好接着进来一个干嘛。

他一上来从这进来的吧，但是进来他不是放在这里，放在头上。是吧，啊，也就是说从这边进来吧，看到啊再进来一个。书放在这里。啊，依次是不是放进来啊，关键出去怎么出去。是不是从这边出去，那也就是说入口和出口一样吗。不一样。对吧，最后就有一个经常说法叫先进是吧。先出先进先出对不对，你排队你买票，你想想看。你要先进后出，那完蛋了，那怎么出去能看到吧，好没问题，那下面说站的结构，站的结构啊，怎么说呢啊OK。

啊，它是一个啊用用一个锤子的会比较好说一点啊，有一个概念压站是吧，他假设外面有好几个是吧？啊好几个呢，也是从这里进来啊进来以后它也不放在这里，放在这里。是吧，假设放在这里，好，假设放在这里，假设摆起来呗，是吧，好摆起来关键怎么出去呢？是从这里出去吗？不是从这边出去是吧？这个生活中什么样的是一个占比结构。啊，对啊，羽毛球是吧？OK，还真是那个羽毛球吧，你要你要用队列的结构去整，那特别有点费劲，那个羽毛球前面呢，是是这样一个圆球是吧？它是一个展开的这样的是吧？那整个呢，是一个圆筒是吧？这个圆筒你肯定是这样塞吧，这么塞能看到吧，你拿出来时候你得怎么拿。

你从这边拿你才好拿出来，你要强制从这边拿，那就废了，那你别打了。因为你它卡住的嘛，他这个羽毛就是卡住的。啊哦，这这个应该队列说错了啊，对啊，错了，羽毛球应该是队列。是吧，羽毛球这个羽毛球的这个啊，你们说的羽毛球是一个我羽毛球，羽毛球不就这么放的吗？我觉得羽毛球放和拿它是他不太一样啊，你们羽毛球放了以后怎么拿出来啊，天呐，那你怎么放进去是啊，那你说那你现在说他是个什么结构啊，这个羽毛就好，你类似一个类似一个这样的羽毛球，大家看啊，我们先想想生活中的体验啊，没事啊，没事，这没事，你想看这是个羽毛球那个那个筒子对不对，羽毛筒子好了，他两口都可以动，都是空，都是可以拽开的是不是啊，接着你放的时候，你是怎么个放法。

我可能放的习惯不一样，我是因为我平常打羽毛球，我是拿着羽毛球啊，是这样一个结构的是吧，那个有个圆球，我就拿着球，拿着那个什么往里面塞啊，往里面塞是吧？记住了，我是那个球往朝下往里面塞是不是好往里面塞接着你怎么出来，你有拽毛的出来了，平常就不对好不好，就就拿着那筒子不就甩甩甩就不出来了吗？我们拿你拿着出来嘛，我就敢肯定你肯定没怎么打球，打羽毛球你们是这么都是么拿的吗？对呀，你确定啊，你拿错了不是拿错了呀，本来就两口，现在基本上都两口都拍的呀。

都两个都开的呀，两个都开的，主要是拽着那个，主要是有个什么，他那个他那个不是可以更开一点嘛，你想想看，你去拽个毛，你又不好拿我哪个位置，它是一个是个圆形的，刚好抵着那个两个两边的臂，你去拿的时候，你作用力在哪呀？你没法作用力，你要是拽那个，拽那个球的话，你想想看，你都不用拽，说实话我就我就这么一甩他就出来了，你要是反过来甩没甩出来吗？你省你甩不出，而且你那个羽毛是有损伤的。看来咱的生活我觉得我觉得这非常正常的一个情况，既然你们这看来是不同地方的人嘛，关键是我看到的都是这么搞的，你我啊啊，除非是除非是一个狗啊，但是但是基本上说实话你没发现现在羽毛球都是那那种收是两，基本上都是两个口，那大的为什么呢？是两个口，其实就是这样一个人方便拿嘛，啊OK，其实还有一种方式就是大家，譬如说大家有个箱子。

啊，无论你是放衣服了还是放书啊，对吧，你不是往往下放吗？往下放，但是你拿的时候，你如果摆满了，你要往拿底下的怎么拿，你得把上面的拿出去。是吧，也就是说你最先看到的只能看的是上面的吧，懂不懂啊，OK，如果说你的这个你的这个是封闭的啊，如果你的盒子是个封闭的，那肯定就是一个这样的结果了，是不好。啊，这个其实这没意思，我觉得有一个非常有意思的一个例子啊，这个例子呢，口味有点重，真的口味有点重啊，说这是大家有人应该经历过啊，应该经历过，说你去跟几个哥们去喝酒是吧，喝多了，喝多了以后你有个哥们就进了厕所。

进了厕所你就去瞧，你可能去瞧是吧，瞧它是用站的结构呢，还是用对立的结构啊，其实你不用想啊，不用想，你就看他去哪个位置啊，他是他是嗯，他的那个那个洗手那个那个洗手台上呢，还是进了厕所啊，或者说他蹲下来了，还是没蹲下，他要蹲下来了。那就是用的站的结构，它还没蹲下，那就用的对立的结构。啊，应该说啊，他如果是蹲下来应该用的对立的结构是吧？是的是的，大家想想，想通了就好了，想通了就好了啊，想通了好了啊OK啊，如果如如果他蹲下来应该是用来队列的结构，如果他从吐出来的，那应该是一个啊OK战的记录啊。

啊，想出这个，想出这个东西的人应该是一个是应该是对技术有了很深很深的理解啊，啊大家以后也会有这种体验啊，你你就是什么意思呢？就生活中你时不时的就会想这东西，好像跟我跟我跟我昨天做那个情绪好像想法差不多是吧？啊OK，你做多了就会这样啊。好，关于队列和站的结构呢，是面试中有可能会被问到的两个结构啊，一个队列一个站啊。啊，当然如果如果，如果你是个男的啊，面试你的对方也是男的，那你就可以举这个例子，但是如果是异性的话就不合适了啊，包括如果是女性都不太合适是吧，有点口味太重啊，男的可以开个玩笑啊，把关系拉近一点啊。都可以，但女的好像不太好是吧？啊，不过你要是就是那种比较放得开的也没问题。

你可可以可以隐晦一点啊。啊。来啊，那其实这里面呢，就会涉及到啊，这个另外一个API啊，什么API就是root，刚才我们是不是说这个组件对象里面有一个属性叫多root。其实它还有另外一个属性。嗯，大家应该能想到吧，就是哆拉夫root，就它设计就是感觉呢，就是特别特别的舒服啊，就是成对的设计，设角这个root呢就代表路由器，而这个路由器呢，就会有一些方法。来实现什么路由的跳转？嗯，大家应该能想到，譬如说我要我要用push的方式，应该用什么方法。那肯定是push相关的呗，对不对啊，再不然就问，如果是replace的方式，那又是replace方法，Replace和push区别在理。

啊，是否替换的问题，对吧，户型是不是压进去，那也就是说它整个用一个什么结构来管理所有访问过的路径。大家觉得？用战还是对立？为什么是站的结果呢？打你的小啊，你访问过A，访问过B，访问过C是吧，那接着你回退回到了，回退到对不对，再回什么。对列吗？有时老师你这话你一看你怎么，难道我发反方向你就觉得受不了了是吗？ABC是吧，那就是C吧，C我要回去是把我要看到B是把C删掉啊就看到B了，回去不就把C干掉吧。

是不是看到B了，我再回对干掉看呀。扔了吧，是个三的结构啊。好，那现在呢，我们来去做这样同样一个事情啊。在这一个看看看看在哪个里面，Message里面。哎，里面好了，这里面除了有链接。啊，所有链接是不是还有按钮啊，来搞按钮，第一个呢是叫push查看功能，跟这链接差不多啊，再一个叫什么呢？Replace查看。没题吧，好，这里面肯定要加什么在监听呗，这必然的呀。对吧，来我这个地方叫push数可以吧，好，这个地方应该传参数。为什么要弹出呢？你想啊，这个地方是不是有变化的一个值是它的ID啊。

认不，也就是说你咋知道你点的是哪个呢。两分懂或者下标是不是都可以。哎，好，估计你们不说话，我就觉得你们好像不太清楚，那我先不转。这个叫。啊，我先写着好，这里面应该写什么去。是不是写MY啊，MY来个他是吧。啊，这还一个。Replace。好，我们刚才说过了啊，These里面有一个特别的属性多少如。对吧，现在我要去调用它的什么方法呢？Push push的就是一个路径。能不懂好路径应该是多少呢？不就是这个值吗？

是，是不是。是，那关键是我这个值里面是包含一个动态的ID。是吧？ID了。我需要ID，我没有怎么办就对呀，谁调用谁传呢，很自然的嘛。那谁叫谁传你传呐？怎么穿？是这意思。是不是这意思，好，下面的这一个。用什么？能看到吧，好，我们来看一下，看看是不是在哪啊。啊，ID要改一下是吧，ID这里没加。看就懂啊，还那个没开。

好了。不就好了吗？穿了吧，好，行，来就看我们的了。走里打开。好。点它。OK，没点这个各位。点这个是不是也可以。好。有没有效果，有好，现在我们要去比较一下这两种方式的差异，先回过去啊，先回过去好，现在我呢，先是访问了60。能看懂就是从60切换到什么message。好了，接着message里面去推压进去了一个。是不是退了好，现在我。点他。看到谁是还是60，对message能不能好，我们再来一遍啊先呢，我是60。

接着是message。接着用replace。好，现在应该是message还是news news？就对了。能不能？啊，你没发现我自己的回电分析嘛，大家知道应用中是不是经常那个头部有一个向左的箭头。就是回退是吧。那也就是说，现在我们要通过编码的方式，是不是也要能实现回退才行，怎么办？来用一个按钮是吧，来一个button。可以吧，叫什么回退。来写一个at，我就在这里面写，该怎么写？啊，怎么办？首先肯定是那个root的功能，我怎么样得到root。

啊。怎么得到root？干嘛呢，你刚才咱这写了呀。对，你别说白了，就是要不要写this的问题，你就确定这个事。还有一个方法。嗯。以前在里面好像叫go back，少两个字符不挺好的吗？看到啊，点一下是可以可以没问题啊。可以啊，可以的。嗯，什么，嗯。这是我们常用的三个方法啊，一个是push，一个是replace，还一个是什么。

在真实的项目中，用编程式的导航是非常常见的，这个大家必须得掌握啊。好，其他的就没有什么，其实还有一个这个这个不过啊，他跟我们的这个back一样的，而且这个难记，因为它要记，你要记住必须是勾负一。才才是回退啊，大家知道除了回退还有一个前进啊，就是这个很少用很少用啊OK。啊，这个前进用什么呢？就是用go的话，写一个一就行啊，这个非常好用，用的非常少，所以就大家不用去管，主要是这三个。大家首先一定要记住一个是其实都不记这个东西啊，有两个方面，一个方面我怎么得到这个对象对不这对啊，不要单独记这个，你要想着this里面有两个特别的属性对吧？一个多root代表当前组件对吧，一个什么多root代表路由器。

对吧，而这个里面是存了一些数据。我这个是一个功能的对象，它里面不有个方法吗？操作路由的一些方法。啊，就三个嘛，Push replace，什么bike。你把这两个记住了，其实就好整了。再一个你要知道啊，我们路由的一些啊管理方式啊，为什么是有push和replace之分，因为它是用一个站来管理的。好，那整个就没了，那下午的时间呢，我们后面就开始去讲业务源码分析难度要稍微大一些啊。怎么办？