32_尚硅谷_嵌套路由.avi原创

好，那下面呢，我们来去往下继续做呗，是吧，下面我们来做下面的效果大家看着啊，那八没什么变化，不用做了，现在主要做后。Home组件，大家看到这里，这上面链接。当我点击home的时候，它实际上请求谁了，Home下面的什么又也就是说我的这个路由组件里面吧，它又包含了路由。那么呢，我们称它为什么呢？子路由。你也可以把它看成是二级路由，也就是说最外层的about home是什么一级路由？对不对啊，下面就二级路由，二级路由也就是在某一个一级路由组件里面呗。这里面大家看一下。能看到吧，这一看就是两个路由链接。能看懂啊，OK。

好，现在呢，我们就来做一下，有个概念叫嵌套路由啊。何为嵌套的路由啊？路由组件中的路由就称为什么嵌套的路由？啊，这效果我们看了，刚才已经看过了，我们来去做，现在我就要跟大家总结一下，如何来去编写路由代码。他也是有套路的，就那么几步。就那么几部。如何编写啊，路由效果你想想看啊，这个路由效果肯定要有路由组件吧。一上来第一步，编写路由组件。Let me know。好，来，下面第二步在负路由组件中。

啊，在附中干嘛呢？啊，指定两个标签。哪两个标签呢？啊，只有两个东西，一个是路由链接，一个是路由。不就是两个标签吗？路由链接是哪个标签？啊，OK link或者是link对吧，如果是导航的链接，那就never那路由入呗。就这就这样的一个基本的步骤。那我们按照这个步骤呢，一点一点写就行。现在看一下我们当前需要几个子路由啊。几个指路呀。两个吗？这两个链接嘛，这不很简单，一个六一个message。是吧，好来整吧，先把那个组件创建出来，因为它是路由组件，所以放在这个里面。

来写啊，一个是60啊，新闻这个单词本来就叫60啊，不是因为列表数要加S，本来就是USS。这个60本来就是个整体啊，好点减X。还有一个。是啊，点去S。会长好，这里。好。来把它们俩都可以做啊，你可以去写都没关系啊，My component走你诶这个应该都小写是吧。并且大写的统一风格啊，虽然这是大写没问题，但是呢，既然。想这么多，最好风格统一一下。嗯。

这一个里面倒是写什么60，这是68啊，下面还有一个。A message。对吧，好，下面来看一下又是啊左边的。这60其实就是下面这一部分，因为变化的就是这一部分嘛，这应该是个uiii，而且有一个列表是吧？啊，你可以啊这样来啊，我们来整一整。那应该有一个ul，哎，Ul标签在是不是ii列表啊，那这个列表呢，你可以写死，当然你也可以根据数据来渲染，对不对，说白了你有个状态是个数组。能弄不好，那我们可以给他出出一个状态得了。那写个什么？State等于一个对象给这个数组另一个名字。是新闻的列表吧，一个写法六是这里面有几个写法啊，一种是6LIST，一种是六啊，一般我们简写不成这样。

懂吗？因为它本身就有S啊，这不是一个，这不是个负数。嗯，这要注意啊，那我就就是等于一个，不是等于冒号速度。数组里面是什么类型，主要是。字符就字符串，因为它就一个简单文本，别的啥也没有对吧，很简单，就是一些字符串呗。啊，OK，来一个啊啊，这个不一定不一定是123啊，你来个四也行，这个没关系。对吧，这没有影响好三个是个意思啊下面。我们要去。根据数据的数组生成什么？标线的速度来吧，第点是点60点。

接着箭头函数哪一个嗯六哪一个index，哪一个箭头返回的就是一些ii标签。对吧，啊，先把里面写了。接着来一个K，第一写来一个index，这就套路啊。这个应该是好写的。啊，这个比较简单是吧，来下面我们来看一个难一点的下一个。下一个呢，难在哪呢？这些标，这些按钮我们先不写啊，我们就写这个列表。这个列表也有一个问题，他开始他是没有的。说白了就是这个数据吧，是什么呢？异步加载的。按到吧，就开始没有嘛，所以显示不出来对吧，这些按钮我们都是后来做别的测试了，先不管它，就看这个链，而且这个是链接。

这个链接最后用来干嘛？最后用来显示这个消息的详情，这是消息的列表的消息名称，列表下面是另外这个先不做啊，这个先不做，你回过去。我们现在就做这个列表。但是跟它的区别有两个区别，一个是那个数据是异步显示的，还一个它不仅是文本，还是个什么链接，来我们来做一做。做一做，还是跟刚才类似的，没什么差别，我们先还是要设计一个状态。State等于。好，设计个名字。那自己死吧，既人家是人家是的优势，你因为你写个瑞多了两个字符不行。认懂吧，好，数组，那这个时候就要问你了，每一个数中的元素什么类型呢？就是一个字符串行吗？不行，这里要说一说，大家看到左下角。

这里面有一个数值，看到吧，这数值是什么？是这个消息的ID。标识ID，我到时候要根据它去查看对应的详情的。懂不懂，所以我每一个都应该是个什么对象，我大家看到啊，有这么两个属性，一个叫ID啊，假设一个，第一个是一，再一个呢，我叫消息的title标题。那么呢，后面我可以查看消息的详情了。好，那标题我就写个MESSAGE001可以吧，好。没问题啊，这个里面不一定是啊，我要搞个三啊，搞个五搞个四啊搞个五，那正好这里对应上吧，到时候就看的出来。嗯。看到了吧，好，但是啊，这一个我等下说我刚才。

这个数据。什么意思啊？开始没有，因为我要一步写什么说明开始是空速度。能不能好？不管它是不是控制，我们先想办法让它显示，我们肯定要读它显示吧，跟刚才的搞法是一模一样的，没什么变化。啊，不用div了吧，是其实搞一个搞个什么用L是不是可以啊这么快。啊，这个ii啊，来看它里面还是一样啊，大括号this是点state.message的map啊，刚才又要写一遍了啊，搞前一点的M简单点啊，Index。箭头。好，这个时候结构有点复杂，所以说呢。加个小括号去写标签结构ii标签吗？

但这个里面到时候是不是个链接啊啊，我先暂时写这个A标标签好吧，暂写这A这个能写什么标签内容。M点抬头对吧，而且他应该是不是有一个hif啊，我问。啊，带个搞成让它成为一个链接就行，具体的到时候再做啊，后面再做啊。应该不是我们当前组件整个做的好。但我现在能显示列表吗？不能，我现在是不是要模拟去发呃，这请求获取数据啊，那我应该在哪发请求啊，很简单，固定的，其实叫D的什么mount，诶好像有点不对，Po是吧，D的mount。

记住了，我现在啊是模拟发送请求，异步获取什么。数据。那怎么样模拟呢？就这个呗，是吧，箭头函数啊，我说过了，只要是这种回流函数，都用箭头函数指定一个一秒钟。OK，好，里面做什么呀？啊，里面先搞出，先模拟搞出一个数组来啊，看messages，这就是我从后台获取的。把这个给它展开。那不懂，好这个就可以干掉了，没用了。能看到吧，下一步干嘛？得到数据后更新状态呀，怎么更新认识点set括号大框message。

哎，冒画不？是这样的吧，嗯，这样我就去更新了状态啊，最终我的列表就能显示出来了。那也就是说到此为止，我们的几个组件啊，几个组件就这么写出来了，大家看看我的第一步就完成了，对吧。我们说第二部干嘛来着。在副路由组件中是不是指定了，那我当前路由的副路由是谁呀？路由组件。怎么看呢？是谁？我是在home中显示的。这能不能懂，所以我要去打开我的什么home组件。是这个呗，好，最好先把它搞成标题吧，稍微大一点啊HR。

下面啊，下面我们要写出这个效果来，就它应该有个这个是吧？啊这个里面啊是一个什么呢？我们来看一下啊，它其实就是一个ul div里面有什么。大家看啊，Div里面有ul这个U13里面包含的是链接。路由链接能看懂不啊ii啊，两个ii里面有链接，接着里面这个下面的是我们什么，是不是路由组件显示的部分啊，来我们来写一写啊写写围栏的就是这里有有一些样式，看这里先来个div。啊，先给大家整个包一下是吧。哎，这外围啊，外围得先来一个什么整体来个第。不然的话没跟着签了。是吧，好，来看它。啊，下面呢，就是那个链接的外围ul是吧，里面有两个什么啊，这个ul呢，有一个特别的class啊，特别的class就这个，不然的话它样式没这么好看啊。

好，下面啊有两个I吧，每个I里面都有路由链接。应该用一个什么样的组件标签呢？MY，什么navy my，呃，Navy in是吧，From。点点。啊点斜杠嘛，不对，他们它是一个一般组件，没在路由里面，接着是什么MY，诶这个名字也写的不太好啊。呃，这个名字。这个名称。

这应该怎么写，My god？啊，那后面我就直接写了一写，这样还是不太好啊，虽然说有点嗯，看着不爽，但还是这么写一下，既然风格都这么好了。是吧，好来啊，这个这里面还这么写的吧。这里面还这么写的，只是说我们在有些地方得稍微的引入的时候得改一改。这个吧，好，还有我们的这个那个，还有一个就是我们当前的home。这不对吧？知道吧，嗯，好，下面我们要写两个啊，来先写一个。写上它呗，是吧，哎，这个里面要写标签体了。一共有两个吧，一共有两个，那复制一个呗。先写上面呢，上面不就左边吗？左边是什么60。

那写一个60。接着要写一个什么？啊。指定路径对吧？好，这个路径是怎么指定的，大家看到这里。其实很好懂，我现在点击60的时候，你看它是什么。是不是对的？是后母下面的60对不对，所以我再去指定路径的时候，这个to。看着吧。有人看到吗？记住，别把这个60给丢了。没问题吧，是home下面的什么60。那下面的是不是跟这什么。一样的，只是我是一个什么，那我这个也指定为什么message。看到吧，好。那这个ul的下面是什么呢？

你看UI的下面，大家看一下这里啊。这不就是我下面的路由组件显示的部分吗？啊，我先写一个，先给他来个div啊，在里面再写我们的路由组件。路由组件展示怎么样展现出来？是不是定义路由组件了？但是我这里面是不是有两种可能性，对不对，有两种可能性，只显示其中的一种可能性吧，那我应该怎么过，所以说这个Switch其实用的比较多。Import引入两个东西啊，先把from写好，先写from，再写引入上，这样有提示。先引入那个Switch有，再引入什么root路由。对不对，Dire估计要是吧，因为等会要自动啊，先你先可以不写，等会看到效果需要的时候再说啊，这两个肯定需要。

来写吧，太简单了，对吧，再来一个。对吧，好root。两个东西pass。来吧。不写这个吗？对吧，现在还有一个什么。Component等于一个值，对不对？那所以我要将我的两个子路由组件是不是引入进来，Import等于两个，第一个叫news。是不是from点斜杠还有一个from啊，点斜杠message应该有是吧。那下面的事情很好办了，其实啊，这写什么六，再来一个这一个写message，这个写大写的什么message。

是的，没好。那也就是说我们刚才说的三步都已经搞定了。对吗？先定义路由组件，接着啊指定路由链接以及指定路由。能不能看懂，好，那下面我们就来看一下我们的这个是不是可以了啦，对不对，要看才知道啊，点一下它好来了啊。关键是不是就是点它，是不是显示点它，哎，看见没有。是吧，好可能呢，我有一种需求啊，需求是什么呢，大家看到。啊，当我点击home的时候，我希望60能够自动显示出来一个。就是我一共有两个嘛，但我希望60能显示出来，对不对，一上来就能自动显示出来。

其实默认显示嘛，怎么办啊，其实大家这个刚才都已经说过了，大家都懂了，就。在这里是吧，啊结束来个什么应该to吧，去哪吧，对不对，好去哪了，这个你你应该知道啊去他呗。能懂吧，这个应该是能懂的啊。好，那这样的话，现在路由没什么，跟那个一般路由写法也差不多。啊，只是说我们这里面有一个子路由的概念啊。这个非常重要啊，就是大家在写的时候的一个基本套路是什么。

好，那这样的话，我们的这个啊，基本路由之后的嵌套路由也就搞定了。