56-尚硅谷-尚医通-后台系统-医院设置前端-bug修改

各位，刚才呢，咱们完成了医院设置的增加修改删除列表功能，然后下面我们继续往下来做，下面呢给各位演示咱们刚才功能中啊这么一个bug的产生，那我们看一下这个bug到底是什么，给各位来演示一下。大家看啊，我现在呢，比如说我点修改是不是做一个数据回线，然后我回线之后，比如我怎么做呢，我再点医院设置添加，大家看bug就产生了，咱们产生了哪注意啊，大家注意。我点添加的时候是应该是表单数据为空了，咱是不是叫数值啊，但是问题就是我先点修改再点添加，这值没有清空吧，是会产生一个bug，因为它还是上次那种，而正确效果就是点添加里面应该是没有东西的，那在下面就把这个bug我们来解决一下，咱们看怎么来做。大家看啊，为什么出现bug，因为咱们现在修改添加用的是不是同一个页面，而在同一个页面中，它都是用这个页面进行显示，所以咱们做处理，那怎么处理，我们来看一下，首先第一部分咱们看一下我们刚才的代码中的这行代码。

就说各位是否注意这行代码什么意思，是不是就是判断你路由中是否有ID值啊，如果有的话，那我们常去修改，如果没有的话，咱是不是加else，有的话咱们修改显示，没有的话咱就把这个表单数据里头清空是不可以了，那我们怎么清空，咱就直接来一个，这次点好PI set等于一个空。是不是就可以了，这样的话就可以清空，所以这是一个我们解决的一种思路。然后洗完之后我们来试一下啊，看是否好使。比如现在我先修改做回写，然后再点添加，大家发现这值没有清空吧，但同学可能会想，是不是你的代码写的不对呀，那我们来试一下啊，比如说我这么做，我现在在里边呢，我加个alert，比如就来一个一，咱就看一下这行代码到底有没有执行，比如我们来试一下啊，比如现在我先点修改灰险，然后我再点添加。

大家发现什么问题？这代码没有执行吧，如果它执行的话也能清空，为什么没清空，因为它没执行它它就没有清空的，所以这时候我们出现一个bug，那这个bug为什么会产生？给各位来说一下，大家看一下我的课件中就这个问题，它叫做vuee中这个组件重用问题，或者说导航切换问题，什么叫导航线问题，因为我现在两个路由跳转，就你这里边是A的。包括你这里边这个e did，它们跳的是不是都是同一个页面呀，而在这个时候有一个特点，当你两路由都跳转到同一个页面，那页面中的可以的方法只会执行第一次，后面就不执行了，比如说第一次我点修改，这方法执行做显示，第二次我再跳转，这方法没有执行，所以它就没有清空，这是目前它一问题，多次路由跳转都到同一个页面，那这页面它就不会执行，里边的配方法只会执行一次，这是它一个问题产生。

也就这个方法只盈一次，那我们怎么解决呢？给各位说一下啊，有一种方案，它的做法就是啊，咱可以让每次路由都去重新初始化，重新加载页面，也就是说什么意思呢？大家看啊，我现在点编辑是不到这里面，然后我再点添加，你发现我页面没有刷新吧，没有做这个重新加载，所以咱让这页面重新刷新一次。是不是又可以做到了？那怎么重新刷新？在这个框架中给咱们提供一种方案，它可以让每次路由跳转过程中加上一个随机数，让它每的都不一样，就可以做到一个每次都刷新。

就是在每次路由上面加一个唯一的一个key，让它每次不一样就能刷新，那怎么做的？就是在框架中都有，那我们找一下啊，在这个views里边有个文件夹叫layout layout中有一个comments comment中有这个文件叫app.voe然后在里边大家看有这么两个地方，第一个地方各位看这行，我先把这行注掉。就这行啊，我先给它去掉，然后去掉之后咱把这一行给它打开，就看这行啊，Root wave表示路由，然后里面加个冒号K，这个K就用下面的这部分，我把这三行代码给它打开。这样的话就能解决，而这个代码什么意思？它就表示每次你做路由跳转的时候，都给它生成一个随机的为一个值，让它每次路由都不一样，这样的话每次都能重新刷新，包括你看这里边router name，然后里边是不是new了一个date date就当天时间嘛，每个都不一样，这样的话把这问题我们就能解决，就让每个路由不相同，它就会重新加载。

这就是解决我们这个组件出现问题的一种解决方案。所以咱们就做到了啊，然后做到之后我们来试一下啊，现在我先点修改。是不是做显示了，再点添加，大家看是不是就没有了，然后你注意这个过程啊，我点修改它刷新页面，我点添加是不是又刷新的页面，这个时候让你的组件重新加载，它就不会显示上一次的内容，所以咱们现在就把这个小bug给它解决出来了，各位知道这个特点啊，多次路由跳转都到同一个页面，页面中的可以的方法只执行一次，而解决方案就是让这个每次路由跳转都去刷新整个页面，那就把这个文件中的这几行代码给它打开就可以解决了。

这是关于我们演示的这么一个bug的解决。