39_尚硅谷_Vue_路由介绍

好，来啊。关于我们的这个路由器的使用，我先要去把我们这个view DEMO里面的路由器的部分给它运行起来。啊，我要把它运行起来，我需要去把这个。稍微的改一改啊，或者说啊，或者我是不是可以这样在那个build里面啊，我有意的改一改看看行不行，我们上一次大家不是出现过的那样的问题吗？它默认是找的src是吧？诶在哪里，在这是吧，在这我故意改下它。看到吧，啊看到啊，我们有意的改下他看看。来，那也就是说下面呢，我们要去啊，给它运行起来是吧，N PM start。

Run d也可以啊。好，现在的那个端号呢，是呃8080，那因为我们没配置这个触，所以说必须得手动启动一下。这个应该大家见过是吧，啊，因为同样例子啊，因为这样大家熟悉一点，其实就是讲同样的道理啊，这语法不太一样。也就是说，呃，在真实的应用中，大家要知道啊，我们做的都是一种应用，现在比较流行呢，SPA应用叫什么呢？单页应用就是说白了就一共就一个真实页面。对吧，那关键是我们要承载的功能页面界面是不是很多呀。

那就涉及到啊，我的界面是不是在不断的变化，本质上在不断的变化，对不对，但是肯定不能跳转页面跳转是肯定不行的，对吧，可能就是有一些局部部分在跳转，那就有一个概念。叫路由链接。是吧，点击路由链接，它本身向后台发请求吗。发不发不发，你要发请求的话，那那那不就跳转了吗。这意思不，而只是是不是更新显示不同的路由组件了，但路由组件内部是不是会向后台发加请求，动态获取数据有可能。有吧，有我刚才强调的是啊，我点击这个路由链接本身并不像后台发请求是看见不啊看。啊，这个大家以前学过的路由，所以说基本上都很清楚啊。

嗯，这个呢，来看一下实现18应用的一个插件，这个一说大家都能懂啊，这是它的一个。呃，Getth up啊，下面呢是它的中文开发文档。我想现在怎么。呃，怎么长这样，这有点受不了，以前从来不这样的事，是我点，我不知道干点过一次以后，后来总是这样。你们有吗？现在有了，估计是就没多久，不超过一个月啊，就是半个月之内的事。因为上个班都没有。估计也是访问人太多了吧，可能。啊啊，这是它的一个，到时候可以用的看的啊，大家以后后面要详细的写的，要详细的用，可以去看看它基本上你要有的问题从上面找，应该找的十九八九不离十啊都能找到。

啊，那我们要用的话，首先第一步得什么。是不是下载root这个包啊，啊，这个应该是大家懂的，我们当前还没有了。所以说得去下载。好，我把这个呢，给它备份一个啊。这个是我们的那个。是有着色气。有的吧。就有。题是吧，好，那下面就剩下我们的这些东西了啊行。那等他下载啊。把这些玩意。你都给他干了吧？

好，等会再写啊来。嗯。呃，先简单的说一下它的API啊，看一下。在说这个之前呢，我先要跟大家强调两个概念。一个叫路由器。啊，一个叫陆游。他们俩一样吗？不一样，他们俩什么关系，是不是路由器管理路由啊，啊这个大家生活中有体验啊。下面的一个重要问题就是什么是路由？简单来说，用一句话来说，路由是什么？我都没不问大家语法，我就问路由是什么，这你能理解。

当然你看你后台路由是学过，前台路由路由不也学过吗？都两边路由都学过了，你想想看，你你让你用，你估计马马马虎虎也能用，但现在你就是不能说路由是什么呢。间值对对吧，那实际上就是这个说的没错啊，就是一种映射关系，就是一个映射关系啊，一个K跟一个什么呢？Value。你说下一步想什么？我现在说K是什么是什么了吗？没有啊，你下步就要跟解释K什么Y是什么样，就你应该就这么想。也就是说，路由你知道心里记着一个事情，是个映射关系，别的都不用想，它是拎起来的。嗯，OK。K是什么？

Pass。那是什么呢？对吧，那要看你是刚刚说了两种路由对吧，前台路由后台路由。对不对，那后台路由的是什么。处理请求的什么回调函数，你看我这一说，我既把它，既把它是什么说出来，也把它的作用说出来了。对吧，处理请求的回调函数能不懂。啊，OK，好，那。下一个。如果是前台路由是什么呢？组件。这个东西我觉得特别简单啊，就是因为这简单，前提是你自己总结过，你不能就是老是一说啊，我记住了，我备住了。你那时候根本就没有自己去太去想，其实最好是大家应该把东西都有一个自己的总结啊。

Okay。我相信前面也说过的。啊，OK。啊，有了这些理解，非常的有用啊，非常非常有用，大家回想一下，大家去写路由的时候。是不是要root呀，Root里面是不是写root root里面是不是写两个属性，哪两个属性。Pass a component，你想有了这些理解，我都不用背那些东西，这是必然的结果。嗯，OK。好，这是这个。啊，在那个里面，它其实向外包动的是一个路由器的构造函数。我们刚才不下了，下载了一个root吗。那有了这些理解其实很轻松啊，这是个路由器的构造函数，你说下一步要干嘛？你说我上来要干什么事？就创建这个实力嘛，说白了我要创建一个路由器出来嘛。

是不是这意思啊，而路由器里面创建的时候。写传的是一个对象，这种对象呢，我们一般称之为什么呢？配置对象。啊，这个配置对象里面呢，就配什么去了，你说路由器里面配什么呀，配路由。而它有一个配选项叫root。为什么是S？多个它什么，它的词是什么类型。什么类型宿主嘛。对吧，可以配置多个嘛。这能懂这个路由它有什么先后顺序吗？没有，这有什么先后顺序？路由的区别是不是靠它的pass呀？好，你看数组里面的每一个都是什么类型啊，大家看一下。都是对象这样一个类型，看到吧，因为我这里面是包含两个信息，每两个信息pass和什么component。

就没人告诉我，我一看我就马上能懂，说实话。只要你前面把那个理解透了就好了。OK。好，这个呢，到时候再说实现一个自动转向了，后面再说啊好，那也就是说我前面是不是可以去创建一个路由器，但是有一个事情，你光创建路由器，最终路由器是不是要配置上路由器啊，也就是说现在我是在路由器里面，大家看到路由器里面配置上的路由吧，对不对，好关键路由器我现在配置了吗。没有，所以我需要去配置路由器在哪配置了，诶这个地方大家看这里。New view的时候。干嘛去？配置路由器。前面我们是不是有一个路由器啊，诶把它配上。

你配草路由器，路由器里面路由是不是可以访问了。就这么简单的事啊。还有一个。我们在讲那个说单一应用里面有个非常重要的概念叫路由链接。是吧，那链接啊怎么生成呢？它这里比较特别有一个。杠，Link在里面不也有吗？是不是有一个link啊类似。好，这里面还有一个。还有一个我要问大家，当我点击路由链接的时候，是不是要在界面上显示出来当前路由组件？好，这里面就有一个非常重要的概念，叫当前路由主义。那当前路由组件是不是要找出来呀，其实我有很多路由组件了，对不对，那当前的怎么找啊。啊，我假设呃，去点了一个他对不对。

怎么找啊，我们是不路由器里面管理了很多路由，是不是根据它相当于是个pass啊。根据pass找对应的什么。是不是component也找对应的路由呗。找到对应的路由，对应的路由组件是不是找对了，那现在就有问题，如何将路由组件显示出来了，将当前路由组件显示来，还记得在RA里面。怎么做来着？面。Rap里面怎么做来着？好，假设咱现在忘记了，咱怎么办？咱不说这可以不知道啊，我问大家并不是说考验大家一定要备注啊，可以不知道。是吧，但是我们要去什么，是不是查呀？好，那查怎么查呢？

首先那查查东西就最直接的方式就是找什么。是不是找官网啊，对吧？OK，那我们需要去，大家最好是有这个东西啊，大家当然也可以也可以去搜索啊，也可以去搜索是没有问题的啊，我们这里面不有react干什么。Root吗？主要是他这个官网。有点什么呢？太慢了。我知道我平常访问的时候挺快的，是不是跟跟这个这个网，这个网站跟这个冲突什么的。其实到了课堂上我还从来没打开过了。现在。跟这有关系吗？还是因为它本身就是，哎哟，诶这个他的这个页面效果还还挺有意思的，看大家看到刚才那个动画了吗？啊，应该是他做的一个效果是吧？OK。

呃，那这个里面就他的这个文档，其实说实话做的做的不算是特别好啊啊。嗯，首先它这里面是一些什么。例子对吧，啊，下面应该是个开发的是吧，向导就是做了做了一些，嗯，告诉你怎么怎么一步做，怎么quick start下面是什么。是API文档能看到吧，API文档好。这个得说啊，我们现在学的是四。四的用法跟那个跟那个是以前的用法完全不太一样啊，可能大家没有学过，是以前的啊，我们说四里面它的用法，其实它就是靠谁来去显示页面呢？靠那个root显示页面。显示对应的，呃，对应的路由。

就是靠靠这个标签啊，我们可以看一下，如果不知道，那我们可以譬如说举个例子啊，我就看一下quick start呗。Quick看一下它里面有例子吧，有对吧，有例子接着看到它这里面，这里相当于是定义了一个，定义了一个简单的一个组件啊，定这样一个组件，定义了好几个，最终来看一下。啊，它里面有这样几个，看到了吗？在这上面是不是有link link是不是路由链接，路由链接一点是不是得到，当确定当前路由组件。那这个地方就有几个可选择的，还记得有一个有一个非常重要的标签叫Switch，对吧，切换，也就是说我在这里面是不是就配置root。是吧，那到底显示哪一个呢。就要看我点击那个路由链接，当前的路由链接的那个路径跟哪个是不是入场进行匹配。

这个能懂吧，啊OK。这个啊。具具体的语法大意思忘了都其实都不打紧，都是没有太大关系的啊，重点是大家对他的一些思想是不是真的记得啊，OK。好，这是这个我具体我写就不看了啊。而他这里面是专门有一个。标签这种也是挺好的，专门有一个标签来去显示什么呢，当前路由组件的界面。你匹配了谁，这个标签就会变成谁的组件来显示啊，其实是也是比较好的。好，那说了这么多了，下面我们就一个一个做啊，一个做啊，这里面有有是分层次来做啊，我们先做基本路由的效果。再做嵌套路由。

啊，接着我们再去讲啊，木有主见。怎么传递数据？啊，这个为什么要说这个事呢？大家想路由组件会写成标签吗？路由组件会写成标签吗？也就是说，譬如我一个路由组件叫叫A，我会写这个吗？大家想，我们是不是要将路由组件映射成映射成映射路由啊，根本就不会写标签的。对吧，不会写标签，那就不存在一种方式，什么样的方式在标签里面通过什么props来传递数据的这种方式。对不对，那该怎么传呢？啊，其实前面有类似的地方啊，后面再说啊，后面呢，再讲一些别的啊，大概知道一下。行。