43_尚硅谷_Vue_向路由组件传递数据

好，那我们继续啊。呃，下面我们要看的是另外一个，就是如何向路由组件传递数据。你们先看我们要做什么。我们要做的是下一个路由的效果，就是我点它。诶单程我们就没做是吧，这个做好了。就点这个。会将他们显示出来。嗯，OK，就是这样的一个好来。我们先做一些我们能做的，我们能做的还是那个基本步骤啊。先把那个路由组件创建出来。嗯，这个显示的是我那个消息的详情，说来一个message detail。

嗯，消息详情OK，好在这个消息详情显示什么呢？显示这样一个东西。结构是这样的，那实际上应该是一个U吧，列表有三个ii是吧。就是这样的。就三个内容嘛。这是一个，但是现在我肯定不知道是谁，是不是先写三个问号。来代表。到时候肯定要动态取数据的。我们先看，嗯。好，这是第一步，搞好了第二步。将它们映射成主键。From点点斜杠下面的点。

好。他是谁的子路由主件呢？来看一下啊，应该是他吧，对，好，那就写个什么children类型数组。再来一个什么对象是吧，来一个pass。选什么？啊，OK，好，这个有点难写，我们都先放着啊，先放着。这个写的难度有点大啊，我们先把这个写好。啊，这个应该是我们的message。Detail。对吧，好，我们来分一下它这个路径应该写什么啊。看他就行，譬如说我们当前大家看到。这个应该是完整写法，应该这么写。但是我这么想又不对。

为什么不对呢？因为这个值会变呐。是这概念吧，那也就是说我们要写一种方式能够匹配任意的字符，对吧。是吧，你写个一，到时候我是二了，不不匹配了吗，怎么办？占位是吧，三位的语法怎么写的冒号，哎，这个12345什么意思ID。也就是说，我们在映射路由的时候，是不是用占位的语法来去写好？就是这一步啊。那第二步写好了，第三步我们要去写两个标签是吧？啊写两个标签message拿出来。这个标签不行啊，是吧，啊，我们应该写哪个标签，嗯，Root-in有一个什么to。把这个对是吧，这个没问题。

好怎么写来着啊？先是home下面的message下面的detail下面的好，这个值应该取的是什么？Message里面的什么属性？ID属性值对不对？那我就写一个message.id行吗？不行吧，不行。那怎么办？是和拼穿法呀，首先这个地方要拼穿的话，得是我们这个语法，得是GS的语法吧，那不能是HT语法对不对，所以这个左侧首先必然要加一个冒号。对吧，现在拼串呢，有两种可写的语法啊，一种是ES5的语法，一种是ES6的语法，如果是S5的语法，那你应该用单引号，这样的单引号对不对？如果你用ES6的语法，应该用这个单引号是吧。

你要懂这个啊，这真的不是靠背背背不住的，有没有看懂，这看起来挺奇怪，但是就是应该这么写。所以一定要生成一段，当前是在写GS。嗯。你要根据这样一个指导的方针来去写这个代码。能看到吧，嗯，好，这样的话啊，这样的话，我们无论这个ID值是多少，我是不是都可以与这个路径相匹配。对不好，没问题啊。好，那也就是说啊，我们现在是通过什么方式向路由组件传递数据呢？是不是通过我们的路径参数啊，啊路径参数OK，其实我们前面讲过请求参数两种，一种是parent参数，一种是P参数，现在用哪一种？

这个咱讲过的啊。没讲过吗？啊，快的参数是怎么添加到路径后面呢。问号，我有问号吗？我没有。是不是这个呀啊OKP它是首先你得在映射路径的时候，映射路由的时候就要这么写，有冒号在外博。只要看到这个，那你的参数必然是P参数。听懂吧，先要懂这个事啊，好来，后面呢，我要在下面呢去显示root杠没用，但这么写的就不对了。怎么办？选一个肩背。因为必须只能有一个跟标签嘛。能看到吧，好，那那可能看懂啊，现在我们啊欠缺的就是我们这个路由组件，其实还没完全写好吧。

是吧，还没关系啊，先放着啊，看我们能不能点过来。这不是我们的，这个才是我们的。哎，我这个没意思吧。那个A标签没有去掉是吧。这个吧点，嗯，这个应该最好在这个，我这里面有一个分割线。我这个这个分割线是用来去分割他们俩的呀，就这个有一个有一个分割线，哎，我这个分割线是写在写在。诶奇怪，我的这个这个分割线哪来的呀。这是不是有个分割线啊。嗯，不是吧，我觉得不是样式，嗯，是样什么，我看一下那个home，首先home里面有一个，我这里有一个分割线是显示。

他的。我这里面再加一个分割线吧，就这个这个message啊分割一下。好，来看一下啊。这是什么样概念，大家看到我我先点它，那现在现在呢，是我的消息还没有显示详情码啊，接着我点一下是不是详情显示了。但是呢，内容具体内容还没显示对吧，这个组件显示啊，那现在问题就是我们要去根据我传入的什么。是ID值。来去查询，得到那个消息来显示。对吧，啊，现在是在切换，但是组件没有没有动，没有没有动静，因为没有因为写数据嘛。来，那下面一个问题，我们来看一下，我们重点写它了呗。

是吧？来先这样啊，看着我，我看我假设我要显示这个ID，怎么显示啊。就是有个问题啊，我要去显示ID，我不显示内容了，我就显示ID。Ad是多少对吧。你想想看，我这个组件要想能显示出来，肯定是我当前组件是不是能看到啊。对不，现在我就要显示怎么办呢。大家想一想，我前面跟大家强调过一个东西啊，如果要想能显示，必须是不是数据能看的出来啊，看数据啊。能不能看数据，我在代码里面能看吗？不能。来啊，看一下啊。

这里面还没整齐吧，好来。打开是吧。Message detail，哎，这里面就多了一个date date里面有一个特别的一个属性叫多了是吧。多少入啊，这个代表什么呢？说一下啊。代表当前路由。当前路由啊，OK。那当前路由里面是不是有些信息，对不来打开看看。来一个是那个pass吧，配置pass对不对，这一个是我们那个完整，它完整路径和现在我们的路径其实是一样的，是不是好，主要这里面多了一个。你看他还有什么？还只会是什么，因为我们根本没啥问号参数嘛。

我们先传的什么P参数，看有没有。是有啊。那你说现在啊，我就要问大家了，我在这个模板里面如何来去显示这个数据，这很关键。This点你上来就错了哪点。怎么写多了root点点ID。对吧，为什么是D。因为我在去配置路由，映射路由的时候，是不是指定的是什么冒号ID。对吧。嗯，好，你要知道这个事情，那就好办了。是不是这里写啊，写一个什么多了福root root没没有啊。

对吧，爹爹ID。四干什么？好。什么？有没有变？是不是可以变了，说明他是不知道啊。没问题吧，没问题啊，那。好，那下面这个事情是不是应该可以做了。可以做吧，只是说我要根据ID。在整个所有的消息详情列表里面，是不是查询得到一个消息的详情。那我这个地方应该有一个消息详情的什么，是不是列表。我们前面已经有了一个。消息的列表看到了吧？啊，但是呢，这个只有ID和title。和我们这面多了一项叫什么，是不是有啊，我们来啊，看着把这个数组拿过去。

啊，我这里面就不做一步了啊，我这里面就不做一步了，我在这里面呢，写一个啊看。Details。好，这里面多一个东西，有没有看到。那我就写MESSAGE001点点点吧。能看懂好，那后面是不是类似的。诶，这里面已经有了一个逗号了。啊，下面呢，我稍微的改一下内容呗。改一下。怎么好来啊？我有了这个数据啊，我也有了这个，能读到这个ID吧，那我当前要显示的是不是个消息。

而且这个消息是不是变化，所以这个消息应该是我当前主线的一个状态数据。有一个能不能开始是一个什么呢。空对下没有数据吗？能不懂，那没有数据，当然我这里还可以写啊，我这个肯定有数据的。这个应该怎么写，等于什么ID？好，这一个是不是也是类似的，这个也是类似的，是不是只需要改一下这个值就可以。对吧，好，你说我现在一上来这么写行不行。行。不行。你想想看嘛，你这个是浪，他要去解析，那不浪点ID吗？要浪点ID报错了吗。

你浪怎么后面还能点呢？对吧，所以你最好是把它搞成什么。能看到你说老师那是不是还要还要搞这个啊，是不是还要搞这个。这个就没有必要了，因为你是空串还是安没有区别。因为都是不显示。这个怎么弄？嗯，比如说老师弄了行不行，这也没什么太大问题，你就说我把每一个都列出来，列出来其实也可以啊，这也无丑，无可厚非，就这样列出来，其实这列出来也有一个好的地方，就是说明，哎，我这里面必须有三个属性。IV title和什么？狠狠的起一个暗示作用。分懂不？那如果我要没有这个暗示作用，就什么就没有。

但是通过我的这个表达式，是不是应该也能看得出来。啊，这个一定要分析出来是怎么回事啊。好。来啊，那下面。啊，下面我的，我有了这个数据以后，我有了这个数据。有了这个数据，我最终这个值是不是可以去得到啊，啊去得到假设啊，我就在里面去整吧。啊，里面去。啊，其实我这个是不是也可以整成异步的呀，啊，当然也可以按出来说也应该是异步的，懂不懂，就我开始只有ID嘛，我现在是后台去查询对应的详情。比如说老师就这一个，还还搞这么麻烦干嘛呢，现在我就列出来这三个，是不是有可能一个消息有很多数据。啊，这是有可能的啊，只是我们现在不用搞那么麻烦，因为我们现在目标是测的是路由。

啊。好，这边我还是搞一下吧，Set out。来个箭头。啊，来一个箭头，那也就是说我我就这样吧，把这个，那我就把这个直接全部就搬进来了。那下面一步啊，大家看看啊，下面我我这个首先我我这个是不是也要存了。那你要这么做的话，这个这个就是这是个变量啊，对不，这是个局部变量，它也其实也是需要存的，那我就因为它不变，那我就存在这个里面吧，存在这里。那是谁？啊，大家看到我就存在组件对象身上了吧，但是啊，这个时候这个值是不是得确定下来，怎么办？点它等于。

现在我要在这个数组里面是不是找出其中的某一个元素，用数组的什么方法？用完了，这是以前都又又跟大家去，还有考过是干嘛的呀，过滤产生的是什么。产生的类型是什么？产生数据什么类型？我的天，过滤产生的数据什么类型不知道啦。什么叫过滤啊？我100个，我一个数组是100个元素，我要得到其中的50个。你说我返回的数据什么类型这么难接宿主吧？我现在是要数主吗？连类型都不对，怎么可能用他呢？啊，OK，首先你要知道啊，至少类型要匹配吧，翻译的对吧？啊，查找其中的某一个。

啊，查找满足条件的某一个，那怎么才代表满足了条件呢。啊，OK，是不是ID要一致对吧，ID一致或者说我对于我的这个回调函数来说，怎么样代表当前的这个就是最终想要的呢。说白了，我就是要找到其中一个，也就是说我这个返回什么值，我就算找到了。返回什么？其实用这些，用这个数组的这些方法，就要关注两个事情，第一个事情，最终这个方法返回的是什么东西，第二个这个方法的返回是什么。我相信大家，只要你自己下去，真正的自己总结一遍啊，再花点时间稍微的搞一搞，你还是能记下的。是不是所有同学都这么做了？我敢肯定，肯定不是。

啊。在这个地方啊，如果我返回数。那结果是什么样子呢？我我记得我这个问题我至少问了三遍了。找到哪个了，第一个啊，OK，因为便利是从左往右便利的。那关键肯定不能这么做，对吧，我们刚才说条件是什么，条件是两个ID什么相等，那此时那就我要去是不是得到那个传过来的ID啊，那也就是说我要得到ID怎么得到，把它转整个this点多了不root点点ID。对吧，那此时就是这个两个ID，如果什么。

相等。对吧，但是有一个问题，这一个是一个，但这个有可能我不知道啊，它有可能是一个是一个什么呢？是一个文本。这个不好说。因为你写的时候写的路径里面了。这个难找吧？那怎么办呢？能看懂吧，啊，乘以一就可以了，当然你也可以除以一。好。那这样我是不是就确定了一个me，那最后就什么。是不是写错了？OK吧，OK，好，那现在呢，我们来去看一下，看看是太猫的没家没指第一个什么。是时间了。

好。先home。点一下。显示的是吧，我再点一下。是不是可以当这个是这个是我写的，我开始一上来是不是就显示啊，OK，下面的是才后来显示的。关键，哎呦呦。不对呀，对不对啊，新的问题出来了，下面的不对呀。好，我们来分析下，下面不对，说明一个什么问题？说明这个没执行对吧。是概念吧？那说明monkey没有自信。对吧，Mount的在一个组建对象的生命周期里面执行几次一次，那也就是说大家看到啊，我在同一个路由组件里面点击这个东西有参数变化，别的都不变。

他重新创建路由组件对象吗？没有重新创建，要重新创建必然会吊着他吗？是这意思吧，这个一定要知道啊，如果是重新创建的，那必然会重新调用的。那这咋办呢？是不是要了命了？这概念不，那也就是说我们现在并不知道是不是它发生了改变。对吧。怎么办呢？其实这里面它有一个语法叫监视。先是咱们学过吗，是吧，我去。它有一个监视可以去监视了，监视它我们的组件对象是不是有这个属性，一旦啊，我们。

点不同的链接，我们不有三个链接吗？点每一个啊，不同的一个都会传递不同的什么呢。端了会。而且后面写什么。写一个函数吧，里面是不是当前最新的value？是吧，而最新的value流是不是多了入了最新的值？那你说这么一，这个函数一调用，是不是说明我们的路由路径发生了改变？其实吧，啊，这个路由路径化呢，是它的啊。盘绒膜发生了变化。能不懂参数发生么？那我怎么办去啊？那我是不是根据参数再去查询一下对应的。

这个me。是不，那要查他是不是得先得到ID。怎么办？把它是不拿过来。是不是现在ID等于什么呢？这对吗？不对。是value.p刚刚说了value是谁？是不是多root的值，是不是有这个属性啊，就得到ID了吧。哎，这个写法也不对。是吧？诶有说老师这个this点它会不会没有值哦。会吗？不可能吧，你同一个组件对象前面是不是执行过monkey的，那执行过monkey的，我这个地方是不是调用过this.messages。

前面第一次初始化能显示，现在更新是不是也没显示？是这概念吧，啊，肯定有啊。来，我们来看一下，看看是不是这么一个状况啊。好了没？不好了嘛，这就对了呀。啊，这是大家需要去注意的地方啊，就当我改变路由参数，仅仅是改变路由参数的时候。我的界面要想变化该怎么办？Watch。天使。嗯，OK啊，这是这其实是我们啊传递啊路由组件参数的一种方式，其实这种方式呢，是。路径携带什么呢？参数，这个参数其实有两种搞法，我们用的其中一种。

通过它的那个，通过通过我们去看那个结构，都应该知道这个参数实际上有两种类型，对不对，一个是P参数。一个什么query，说白了，只是我没有query啊，其实可以query也是可以用的。Query是可以用的，如果用query的话。那我一个是我的这个地方的变这个里面没有必要写什么冒号ID了。你直接写，他就写，写的时候写这个就行。知道吧，啊。后面这个不用写，再一个你传的时候。你这message传的时候。就没必要这么写了，就直接在这搞个什么问号，而且最好是不指定一个名字，不是最好是必须要指定一个名字，是不是ID等于什么能看到吧，啊，不太一样啊。好，这是这个。

啊，这样我们就把这个给做好了啊，其实还有一个。还有一种方式。通过这一个携带。什么一个意思呢？首先得说我能不能通过路由组件标签来携带属性。能不能？它是个路由组件，标路由组件，它里面标签不是可以传pro属性吗？可以吗？不可以，怎么可以啊，你标签都没写过，你从哪写？你标签都没看你写过，你怎么穿？你不是在这里面注册路由，你哪些标签呢。有没有看到，所以你不可能直接在标签上面去写标签的，没有对吧？好了，但其实它通过了一种变化的写法，跟pro很类似。甚至说可以说基本上一样。

你不是没有标签吗？但是你得知道你的这个组件。在哪，通过谁来显示的，是不是。我们说过了，组件是不是通过一个特定的标签来显示的，叫什么root-view。对吧，啊，这一个标签可能会显示哪几个组件。有有几个。这个标签。就两个，你看这个home里面啊，Home里面啊，Home里面，这个home的里面。显示的是不是60和message啊，比如说我们的这个假设，我们的那个about APP了。BA吗？他谁？About和什么假设，我现在想象啊，Home和about里面传递数据，传递数据。

出，我可以在这里面穿吧。可以，不是我们刚才讲的方式嘛，还有一种方式。就是在这个里面穿，比如说。那也就是说，我是不是想向路由组件传递一个message，属性值是多少？ABC这个串吧。我没有写冒号对不对？我要写冒号该怎么办？那ABC是什么呢？变量吗？是吧，啊，这就没问题，这个这个技巧大家都知道，所以我就不再写了，提一下就行好了，那也就是说我们现在谁可以得到message。About和谁好了，那我们就举个例子，以about为例，啊，来个HR啊，这是about，好，来个P标签。那现在问题是我。

要接收一个属性，需要先干嘛声明呢？什么类型？史俊。行。是这样的吧，嗯，那好了，那我们现在就来看一下不就知道了吗？点一下有没有。哎，对了。那也就是说现在我们给大家讲了两种向路由组件传递参数的形式啊，一种呢，是通过路由链接对吧，另外一种。Root-view传递pro。对吧。啊，这两种方式啊，这两种方式呢，都有可能会用到啊，要注意。