day05【讲师管理模块前端开发】/13-尚硅谷-谷粒学院-讲师管理前端-路由切换问题演示和解决

就是最后内容给大家说什么呢？咱先看我课件中的第二个课件，就是这个。这里边有个东西啊，叫做N这个。不是，各位是否记得啊，之前应该说过这个东西使用，但是咱今天这东西啊，暂时用不到，咱明天才会用到，所以这个今天没说，明天我再具体说，咱先放到这里，各位看的话不用觉得奇怪，明天咱会讲到啊，不是少讲，明天咱会讲，今天咱用到这种场景，我先放到这里啊，这个各位先知道，明天咱会用到NEX。然后咱们最后给大家讲的是这个东西啊，就这里边，咱们刚才这过程中会有一个bug的出现，就是一个问题的出现，给大家最终来说这个问题包括怎么解决代码很简单，但是这问题给大家我要说清楚啊。那我说一下什么问题啊，我先做个演示来看问题所在啊，这个问题怎么演示说一下啊，第一个比如说我现在点修改。大家看啊，路径中有ID值数据是回显了，这么看没有问题，但你注意啊，咱这么看。

我现在路由是不是在讲师列表中啊，就是讲师列表目前是蓝色，他现在在这个路由中，比如我现在啊，再点添加讲师是不是要到咱的添加的那个部分，但是你注意啊，我现在看这个，大家看这效果，我点添加。大家看问题啊，这里边变成了添加路径，但你发现表单数据还是什么数据。是不是还是上次那个回显数据，这肯定是不对的，我再演示一遍啊，咱点回显肯定没有问题，但是我点添加它数据还是上的数据，而正确效应该怎么样，我点添加里边应该是不是什么数据都没有，是不是应该是表单是个清空状态，然后咱能写里边的数据，所以现在问题就在这里，你先点修改没有问题。再点添加，但是点添加的时候表单数据没有清空啊，它还是你上次回想的数据，这是咱们目前出现的一个问题，大家知道啊，这算是一个bug，比如说以后在实际工作中，这bug测试人员会把这个作为bug提给你，告诉你这是一个问题，让你去修改。

啊，所以咱们把这个做了一个说明啊，就是目前有这么一个小bug。然后在里边写一下啊。就是目前我们遇到的这么一个问题。这个问题是什么呢？就是首先第一次我们先。啊，就是第一次。我们先做这个，就是点击修改。啊，点击修改，他先进行数据的回显。这一步肯定没有错，然后第二个，比如说第二次啊，我们再去点击那个，就是添加讲师，他也进入到我们的表单页面，但是问题是什么呢？表单页面还是显示。

啊，就是还是显示你那个就是修改回显的这个数据。回显的啊，这个数据，而正确的效果应该是这个表单数据应该要清空。啊，表单数据清空，但是目前没有清空，所以咱们目前就遇到了这么一个问题啊。这问题各位知道啊，就是你。先点修改做回显，然后你再点添加数据没有清空，还是上的数据正确效果，这数据应该是要清空的，那咱们说一下这个该怎么解决。啊，咱说一下解决方式啊。解决方式。那怎么解决，我希望各位应该能想到啊，因为咱们就是在做那个列表的时候，咱做一个叫清空，这清空功能我一点是不能清空，就咱们把对象清空就可以了，所以咱们怎么做呢？给大家说明，当我点添加按钮，我在做添加的时候，咱们把表单数据清空是不是就可以了？

就是这种方案我写一下啊，就是咱们在做这个添加讲师的时候，我们把这个表单数据。精空就可以了啊。这就是解决方案，那这个代码要怎么写，给大家来写一下啊，咱来到我的页面中，咱快速写一下啊，首先咱看怎么做啊，咱找到这个方法。大家看啊，这方法在页面卷之前是不是要执行，就是先执行，你打开页面就执行，但是执行的时候你发现啊，第一个判断。这时候就表示。页面中路由中有ID址，有ID址。那我们就做回险，那咱怎么做。我是不是加个I。就加个else这操作，因为你注意啊，如果说路径中有ID值，那它表示咱要做这个就是。

修改操作，但是如果说你的路径里边没有ID值，那我们做的是不是就添加，就是else里边做的肯定是添加，因为里边V地址，那咱把那个就是清空表单的代码写到这位就可以了啊清空表单就可以了，那怎么清空，因为咱有一个teacher。Teacher是一个V-model的双向绑定，所以咱把这teacher清空就可以了啊，就是teacher等于一个空。这个就可以做到啊，咱们就是。这么一个代码，在else里边，把这个teacher对象给它做个清空啊，就是写到create里边。然后在这里边做个监控啊。有这个代码。得把它接过来啊，给大家知道这个基本的思路啊。然后写完之后，咱们先试一下啊，看这么做能不能把效果出来啊，咱先试一下看可不可以啊。

比如现在我把这打开啊，咱先点修改，肯定可以回显，并没有错，然后大家注意啊，我再点添加。咱发现。这问题好像没有解决吧，它是不是还有数据，比如大家来试一下啊，看它是不是缓存问题，我点修改，这没有错，再点添加。是不是不对呀，所以大家发现啊，现在的问题没有解决，但是这么写代码并没有把问题解决，表单没有清空啊，这是我们看到这个直观的现象。啊，给大家小下面啊。调节位置，就是我们用上面的代码并没有解决问题啊，那我说一下它为什么。这是我要重点讲的，就是为什么他没有解决啊，咱要说的是这个，因为代码简单，主要是为什么。我来强调啊，大家注意啊。这边一个特点啊，咱来到这里说的更通俗点啊，因为你注意我第一次在讲师列表这个路由中，咱是不是要到这个页面中来啊，然后我第二次再添加讲述中，是不是还要到页面中来，就是两次这个路由是不是都是到同一个页面。

这个要明确啊，你看啊讲师列网是蓝色，通过它倒立页面，然后我T加讲是蓝色，是不是还到页面，就是两次路由跳转都取到同一个页面，但是这个过程中有一个问题，因为在咱页面中有个方法叫可以的方法，它不是这代码写的不对，是因为这行代码没执行，为什么没执行，因为你就是在多次跳转到同一个页问的时候。这create方法只会执行第一次，后面它不会再执行。这是它就是一个问题啊，就是这个方法只是第一次你做这个跳转时执行了，第二次你再添加这方法没执行，所以它没有清空，你没执行的话，这代码它也就不会生效，所以它就没有清空掉啊，这是它遇到一个问题，是这么造成的。

我写一下啊，就是咱们。多次。路由跳转。都到同一个页面，而在你页面中有一个方法叫这个create的方法，它只会执行第一次，后面你再进行跳转啊，跳转它是不会执行的，所以咱们目前是这个造程，也就是说代码没有错，它问题是第一次执行了，第二次这没执行，所以说它没有清空啊，咱看到效果它就没有出来。这是我们说的一个问题啊，所以大家明确啊，我再说一遍create的方法，在你多次跳转都到这一个页面中，这方法只用一次，就咱刚才第一次通过列表我过来，第二次通过添加还过来，但是第二次它没有执行，所以说没有清空。

啊，这是咱们说的一个问题啊，那这问题怎么解决，咱看最后的啊，最终的解决方式。我写到最后啊，就是最终的解决。然后怎么做呢？咱需要使用到voe中一个东西，这东西之前没说过，咱现在来讲叫这个东西啊，叫做什么。监听用voe中的监听来解决，那什么叫监听的，说的简单点啊，当你这个路由仪变化，这监听就能知道，然后他就去执行，咱就加入监听，比如说我现在通过讲师到添加这路由数变了，每次一变化，我用监听就能知道你现在发生了变化，用这个来解决，那这个怎么写，我们先写代码啊，然后给大家再解释一个例子啊。代码很简单，我就写的简单点啊，咱就加上这么一个代码，就这个watch。把这个啊给大家复制过来。

啊，就咱们加的位置无所谓啊，我一般加到C里后面啊，加到method这也可以啊，但是不能加到method里边去，加到它的外边加一个叫watch watch什么意思呢？它就表示叫。监听。而在鉴定中给大家注意啊，这个写法是固定的。就是Dollar符号路to和from，它表示路由变化的方式啊，就是你路由的变化的。这么一个方式，什么叫路由变化，比如我现在你看啊，我这种方式是不是用to，这叫路由变化，或者说我现在点击是不是一种方式，这些都叫路由方式，而咱现在用这个方法中，你这么写，只要你路由一变化，这方法就会执行啊，这叫路由变化方式。当你这个路由。发生变化，那这个方法就会执行啊，这是一个特点。所以咱们就把清空代码写到这里边就可以了，它会监控到路由变化，那再来写一下啊。

怎么写呢？为了明显啊，我把这代码给他先抽取出来，或者说你直接这么做就可以了啊，但是它是重复的，咱给他做个抽取啊。我来一个叫。Init啊，抽取一下。然后把代码写到这个位置，就做这么一个判断。然后洗完之后在上面我们做个调用啊。这个先去掉啊，直接咱们调一下，就是这点init。下面也是叫c.n nit啊，就是第一次create的执行，然后它就是得到这个值做回显，然后第二次你再做路由跳转，它这方执行，所以这段带什么还会执行啊，咱给它做个抽取叫nitt，这个叫监听，通过监听能监控到路由的变化，每次变化这方法都会执晓。

啊，这角渐轻。那咱们来把效果我们先试一下啊。看一下这个结果是什么样的，然后给大家再举一个例子啊，这个什么叫监听，说的更通俗点啊。这个咱先。截过来啊，这个代码。就是这样啊，然后咱们洗完之后，最后我们来试一下啊。先点讲师列表，然后点修改。这个可以回写，然后咱们看啊，我点添加大家看。数据是不是清空了，咱再试一次啊，比如我点这个修改是回显东方胜文老师都有，然后我点添加。是不是清空了，这样的话就可以了。所以这是用voe的监听解决。就是当你。路由只要发生变化，因为咱们是通过列表这路由，然后到添加路由，当你一变化，那这个监听方会执行，他就指引我们写这个代码，把表单数据做个清空啊。

所以咱们就是这么来解决，这是它的解决方式。这也是voe中经常遇到一个问题啊，说这个就是说的官方点叫路由切换问题是这个啊。我说导航线问题。这是我们提到的这么一个特点啊。所以咱们把它就完成了啊。然后这里边啊，说到一个词叫监听，这个词呢，咱刚才看到只是一个比较直观的一个理解，但是这么看各位应该理解的不是很深，所以给大家举一个比较通俗点的例子带来进一步说明什么叫监听，就这过程是怎么样的，给大家举个例子啊。这例子呢，比较通俗一点，但是很好能说明这个问题啊，包括各位学习也一样，有的时候你看官方的东西看不懂，那咱找一个现实中一个实际例子就能看懂。那我举一个例子啊，说什么叫监听？那什么意思呢？举这个例子啊，首先有一个东西大家应该都见过，这东西叫汽车。

不要说你没见过啊，没见过一会儿去出去看一看，到处都是汽车，而在汽车上呢，咱经翅装个东西叫做报警器。这一点应该都听过。只要是中国人应该都听过这个东西啊，然后这是一个很好的例子，什么例子呢？在汽车上装报警器，那报警器在什么时候会响呢？是不是汽车的状态发生变化？比如说你现在走到汽车旁边，你踢这汽车一脚，报警器就会响，而你踢完汽车之后，汽车是不是要发生颤抖，它的状态是不是要变化呀？这个报警器会响，所以报警器是干什么的？就是监控你汽车状态的变化，当汽车状态一变化，比如汽车一震动，一颤动，那报警器是不是会响，这就是一个典型的监听粒子，汽车跟报警器粒子，或者说你走到汽车旁边，你拿一个砖头直接拍汽车一下，是报警器是不是也会响，这就叫监听器，而咱现在跟它一个原理，就是当我现在只要你的路由一发生切换，发生变化，那我里边的监听器就会执行，这个方法就会执行到，所以咱在里边做这个清空，这叫监听，当路由一变化，这方法就会执行。

啊，类似于我们说那个汽车报警器的意思是一个监听的一个说明，所以大家把这个知道啊。这个。