41_尚硅谷_Vue_嵌套路由

还有一个小事情是大家可以注意的，就是默认是不是有一个刚才我们改编那个名字是用的是这个类名是吧，有人可以觉得这个类名比较长，我能不能改一个别的名字，其实也可以啊，就这里面说了，有一个配置啊，有个配置。啊，可以去指定你看的名字，你都能知道它配什么的，它配置链接激活的什么。内的内名的，譬如我改是不是可以改成这个名字也可以啊。嗯，可改可不改。啊，这里面说了啊，编写路由主要三步，第一步定义路由组件，第二步。注册路由第三步，使用路由，怎么样使用路由啊，是不是两个标签啊，Root杠，Link以及干什么view。啊，这些东西必然是明天肯定要考的啊，有些固定特定的，包括我前面问的啊，那个路由器和路由的理解啊，也是肯定要考的。

好。下面一个叫什么呢？嵌套路由啊，先说一下我们最终要去做什么是吧，要去做一个什么。主要在home里面，大家看着这里面呢，有是不是又有两个链接啊啊，这是一个路由主件，里面又有路由链接。啊，此时就形成了一个什么呢？叫嵌套路由啊，那这个该怎么做呢？我们来一步步做一下，还是一样按步骤来干活啊第一步。定义路由组件是吧。来现在呢，我们当前的情况一个看看啊，现在一个是61个什么message，其实显示的是新闻列表和什么呢，消息列表。

大概能看出来吧，啊，而且好来写一个。啊，大写的吧，你们都大写的是吧。再一个是什么？好，先来看news。啊，60这个比较简单，实际上就是。是不是uiii啊啊，当然你也可以把那个数据给成动态的，也可以整死的，这都没关系啊，比如UI里面有很多个什么ii ii里面是不是有一个固定的数据，有一些特定的数据，你这个数据呢，可以写到data里面，也可以不写，写在date里面吧。好，这个data里面大家看一下是不是就一些新闻的一些名称，对吧，啊些名称。那个那这个地方来一个名字啊。你要它是一个对象还是个宿主了？

啊，我要显示这个列列表，哎，好看。诶，我怎么一打就把他给干掉了。啊，看他看他也行，这里咱不有一个吗。就这个。显示这个列表数据。什么东西？啊，宿主。啊，其实啊，我给了大家很多机会去思考，根据效果去设计数据结构啊，这个非常关键。啊，这个大家以后工作是没人跟你说的，你要根据你的能力去判断，我现在到底要设计一个什么结构的数据。如果你结构都设计错了。那你已经不可能写对了。就能懂吧，啊OK，那也就是说现在我要显示这样一个情况，假设我的页面是根据数据来显示的，我现在是不是要设计一个数组啊，其实也非常简单啊，无非就两种情况去常见数组和对象。

对吧，如果这两种都不是，那更简单了，肯定就是一半数据了，那这个你们基本上不会犯错误。男的不就是要区别到底用数组还是对象吗？是吧，好，这是一个数组，下面选什么。申请开数组就完了吗？我就决定这个数组啦。下面决定什么？想啊，数组里面的元素是什么类型也是需要你知道的。那你说老师数字元素什么类型，我咋看呢？那你就看你这一行有几个数据。就一个数据对吗？那得了。那是不是就是文本。能看到吧，好。

来，你来看这个。啊，这个被压压的有点扁啊，右边的按钮先不看这，后面加的看下这个。也是列表吧，那是数组，不用想，数组中元素首先有文本，够吗？不够，还有链接。对不，所以它不能是字符串了。他应该是对象。袁说，老师，你怎么一上来就说这个里面的元素是对象而被数组了？你在想我这里面是有两个数据，一个是文本，一个是链接，对不对，因为他们有什么先后顺序吗。这个链一个，这一个里面的文本和链接有相关顺序吗。没有。这也无比重要啊，因为后面是没人跟你说这些事情的，是需要你自己去分析的。啊，如果我反复问大家的过程中，你不思考，你就失去了锻炼的机会。

好，那我们这个就比较简单了，就是一些首先是个数组名字啊，这是消息的新新闻的列表是吧，看来是新闻的列表，对啊，新闻列表，那我们这个地方取个名字啊，大家知道啊，60本来就代表新闻。它S不是复数的意思对吧，啊所以。叫可以吧，可以啊。就是大家取名的时候还是稍微的要注意一点。好里面都是一个什么。文本呗。对吧，你要整出一个数字来，好歹取个三个或者三个以上的，对吧？啊，这个没关系了。改一下名字啊。OK吧，OK，下面我要显示太简单了，又。

News index。冒号K等于index。行。60呗。OK吧，OK，就这么简单啊，好，那六已经搞定了，下面我们要写的是另外一个啊，另外一个是谁message是吧，跟刚才其实很类似吧，类似啊，OK，来一个什么date，来一个return，好，这里面要看一下效果。这个效果挺有意思。大概。什么意思？哎，对异步显示这个使用的非常好啊，异步显示那也就是说开始大家看到啊，我这个就叫messages。开始热。

对吧？啊，那接着我再去异步，是不是从后台获取数据，那我应该把这些代码写在哪个里面。哪个啊，这都是固定的，你就把这个记住就行啊，没问题的。是吧，那也就是说现在啊，我们稍微叫什么呢？模拟啊，就模拟一下就得啊模拟啊请求从什么后台获取数据，如何模拟。什么，太out？能看到吧，回掉函数，用间函数。大家记住啊，毁掉函数这种无。没有名称的回弹都用近函数就肯定没问题。对吧，那接着啊，到了此时是不是就应该我从后台就获取数据了，那我这样啊，就写一个message等于一个数组。

看到吧，好，数组里面的每一个是对象，对象里面比如说有一个标题显示的是message标题，假设我叫MESSAGE001，好，下一个是什么？我给大家说一下啊，来看一下。大家看着左下角啊，看着左下角。现在啊，我们这个链接是这个样子的。啊，什么detail斜杠什么一接着看下一个。也就是说我们这三个链接变化的是。最右边那个数值。听懂不？其实是一个什么意思呢？现在我们显示的是消息的标题，等我点它的时候就会去显示消息的详情，那你觉得我的这个一啊三啊五啊是什么？

对消息的ID。懂不懂，那也就是说我这个里面。只需要保留谁？ID不用保存链接懂不懂？很懂吧，啊OK，那也就是说我有好几个是吧，应该从后台得到好几个是吧，啊啊不一连接了P说是也行。有没有看到啊，OK。好，来三个这个意思。能看到吧，好啊，那现在的准备工作做好以后，其实后面的事情跟刚才很是吧，很类似，对不对啊，其实这个这个div啊，这些div其实都可以不要，因为它本来就是一个ul是吧，有跟标签的完全可以不要div啊，Ul里面有什么ii一样是吧？V for大括号，我就说你就按照这个套路写啊，固定套路写是最好的，写什么message反过来再写，这个必然保证你不会写错啊，Message逗号index。

好，这位同学说一下啊，冒号K啊，我们其实一般是不是都写index啊，但是得说一下啊，如果我这个对象有标识属性，最好写标识属性懂吗？现在我有没有有。能不能，那如果你不需要ad，不需要这个index，那你可以这么写。能看到吧，你说老师我这么写的能行吗？可不可以，可以，只是我现在没用它而已嘛。能理解吧，只是说我没用，如果做一个简化的话，是不是可以把它移除啊？

看到吧，啊OK，好，那下面。Ii里面是一个什么东西？是文本吗？不是是个什么链接。对不对，好链接好了，那也就是说这里面应该是个什么啊，按数来说它是个路由链接是吧，我们到时候我们先写成A啊，我们先写成A，这个里面呢，我也先不写啊，先不写，我只是写这个效果而已，我故意的写个问号。这些什么title？有没有看到？啊，我现在就就写了一些问号啊，写在里面，或者说我我就是呃，写个问号，写一个写一个斜杠，再把那个，那譬如说我要我要去把那ID给显示出来，写在这上面怎么办呀。啊，冒号。

啊，算了吧，我现在不整这个啊，我们现在整完再说，估计大家这还有点困难，先放着。好，来啊，那要到此为止，我们的两个路由组件是不是定义好了下一步。现在我们才做第一步对不对，第二步做什么。定义路由组件呢？第二步干嘛？干嘛？又我跟他反问下来，这流程一定要给他记固定的，你把组件定义出来，下步我能写的标签吗？不能，不能干嘛去了。叫注册路由啊，把这些概念名字都记死了啊，注册路由。好，那下面呢，我们要去注册路由啊，在这里面注册好，那这一次路由比较特别。它是我们的这个home组件的什么呢？嵌套路由。是吧，那此时注册的方式比较特别啊，比较特别，怎么特别法呢？大家看一下要去配置嵌套路由，该怎么配置呢？这个是我们home组件的配置吧，在它里面有一个配置选项，其实建明之意，说实话。

Children，什么孩子子路由组件对不对？翻译过来不是子路由吗？其实这个名字取的挺好的啊，后面写什么呢，你看。什么类型？宿主，为什么宿主啊，我可能有多个孩子呀，对不对，所以是个宿主。那其实里面的写法跟前面什么。一样的。一样啊，还是一样的方法，也就是说我们现在唯一要加的就是来个什么children。是吧，那现在我们是不是要配置刚才的message和news？怎么办？哪一个过来？

加一个是吧，先把那两个路由组件给他什么引入。News。还有一个啊，Message是吧，Message。没吧，好来吧，这个是60，那我这个写的什么呢？60呗，但是有一个是啊，跟大家说一下，这个pass最左侧的斜杠代表的是根路径。哎，这个得强调一下啊。什么pass？最左侧的斜杠永远代表着路易。啊，永远A代表啊跟路径，那你说我现在写法对吗。

不对。啊，不对，这么写法不对的，因为我们最终去访问的时候是如何访问的，大家看一下啊这里。啊，去剪它啊，大家看一下是斜杠后斜杠什么六。所以这个不对吧，啊不对，好了，那怎么写才对了，对不对，那其实那我们肯定想到一种写法好嘛，你写完整的写完什么home写杠。对不对，能看到吧，这样是对的。那还有一种简化的写法。还有一种简化的写法，来，好，我下面这个写简化写法吧，这个写完了这。我们还有一个什么。来看它简化写法，写什么呢？省略左边的斜杠。

我们一起看了吧。那我这个麦径是谁下面呢？那自然下面。啊。我觉得大家能写这种就写这种，这个没关系是吧。OK，就这种呢，大家看他认识，要知道怎么回事就行，就是简化一下。没问题吧，好，那也就是说现在我们的第二步做好了。路由组件映射好了，第三步是不是要使用，使用是不是要写两个标签啊，一个root-link，一个什么root杠六。那我在哪个组件里面去写这两个标签呢？那你要看我们这两个路由的组件在哪个界面里面显示啊。

哪个里面home里面去显示。对吧，所以我们需要在home里面是不是写路由链接。是不写root view是不是都要去写？啊。来啊，这里面有一些样式，我把它copy一下。好，为了能够好一点，我把这个写先写成标题啊，这样看起来好一点。这是home。啊。来看一下啊，这个里面呢，首先有路由链接的两个一个UUI里面两个ii，但是我们能不能写这个A吧。啊，不能写A，我们应该写什么去？啊，把这个干了是吧？OK，写root杠什么link root-link有什么属性？

To。斜杠后斜杠第一个是不是60吧。对不，这个里面大写的有是还有一个，还有一个另外一个是什么？呃，这个里面写什么message。能看到不来啊好。好，那下面我们要写的是不是就这一个。对吧，小白。很简单，So easy是吧，You。能看懂吧，啊，要能看懂啊好，那下面我们就去看一看，看看行不行呗，对吧？啊，看看我们的行不行，就我们的。啊，这牙齿也有问题了。

呃，我刚才那个里面没有去把它里面有一些内名吗？我看一下啊。看看是不是有点名什么。呃，这个没有啊，这个这个是这个是那个，我们是那个当前选中的显示的类名，嗯，你看这个就没有吧。对吧。好，现在点的，我先看一下。嗯，现在这个样式稍微先，先不用管样式，我们先把我们那个给写一下啊，先不管样式。来一个root。

好，大家看呢，现在是一个什么情况，有一个有一个问题啊，大家看到有个什么问题。就也不是问题这个东西吧，就是看你要要个什么效果了。嗯，就是我的这个，我的这个里面，现在我选择home的时候，Home下面的这个news和message是没有一个默认显示啊，像刚才问题是一样，一个问题是吧，一个问题，那我该怎么办呢？是不是，如果说假设我希望显示一个，但是这不绝对的啊，记住这不是绝对的，有可能不希望默认显示对不对，如果希望怎么办？假设我希望显示60，对不，这个地方其实做法呢，跟上一次的类似啊类似。看这意思，我是这样。是不是代表当前啊，说白了你就请求了斜杠后对不对？接着我写什么？

是不是写他呀，对吧，斜杠是吧，Home斜杠。那要看你想写哪一个了是吧。能看到吧，又能看到啊哈。来看一下是不是这样的，先是about没问题，就是它可不可以可以一点问题都没有啊，好，看到这个，这很关键。显示效果呢，比较特别，应该是异步的效果。开始没有。发现后面是一直没有是吧，那就要看了，那也就是说现在按照我们一般的做法啊，应该有一个基本套路。啊，虽然说我现在马上就应该我就应该能推测到啊，可能是个什么问题，但是我还尽量的去按照一般套路去解决。真正你做多了，你不一定按1万套啊。真正做多了，可能马上就会去看一下代码什么的，你马上就有一个有个感觉。

啊，OK，但是啊，我们还是先按照一般套路。再强调一遍，1万套路怎么回事？先看有没有报错。没用。接着看什么？数那个界面没显示，大家知道啊，我们做这种东西界面显示都根据数据来显示的。对不对，我得看一下数据在没在。是吧，啊OK。你现在保证有没有报错啊，好，接着看谁去message。是不，这个message是是什么，你空的，那这个范围就很小了。说白了就是我有没有跟他保存具体的值啊，对不对。哎，Message在这是吧，啊，来看一下我们的这个set timeout是不是搞了一个，现在从后台获取了一个数据，忘了下一步this.message是等于。

嗯，OK，我希望大家开始做的时候尽量按照套路来，因为你们不太熟悉啊。是不是有个过程？能看到吧，嗯，好，那这样的话呢，我们的嵌套路由就这么搞定了。