开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-路由切换问题演示和解决】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11343
讲师管理前端-路由切换问题演示和解决
路由切换问题演示和解决
1.演示问题：
先做个演示，来看问题所在
路径中有 id 值，数据回显，现在路由在讲师列表中，讲师列表目前是蓝色，现在再点添加讲师，点击添加讲师变成了讲师的添加路径，但表单数据还是刚才的回显数据。
正确的是点添加讲师之后应该没有数据，表单是清空状态，然后可以写里面的数据。
即先点修改没有问题，再点添加，添加的时候表单数据没有清空还是上次回显的数据，这是目前出现的一个问题。
总结：
第一次点击修改 进行数据回显。第二次再去点击 添加讲师，进入表单页面，但是问题：表单页面还是显示修改回显数据，正确效果应该是表单数据清空
2.解决方式
在做列表时，做一个清空的功能。即做添加讲师时候，表单数据清空就可以。
当点击清空时，可以清空对象。
- 编写代码
打开 save.vue，找到页面渲染之前执行的 created(){}模块，修改代码为：
created(){//页面渲染之前进行
//判断路径有 id 值，做修改
if(this.$route.params&& this.$route.params.id) {
//从路径获取 id 值
const id=this.$route.params.id
//调用根据 id 查询方法
this.getInfo(id)
}else{//路径没有 id 值，做添加
//清空表单
this.teacher={} //清空teacher就可以
}
修改完代码后先进行测试，查看效果，打开页面，点击讲师列表，点击修改，看到数据回显，再点击添加，发现问题并没有解决
- 上面代码没有解决问题，为什么？
注意：
当在讲师列表中点击修改时需要跳转到 save 页面，再点击添加讲师也需要跳转到save 页面，两次路由跳转都去到同一个页面
此时存在一个问题：在页面中 created 方法后的 else 部分未执行。因为在多次路由跳转到同一页面时，created 方法只会执行第一次，后面在进行跳转不会执行。没有执行所以没有生效，最终未清空。
- 最终解决：使用 vue 监听
监听：当路由一旦发生变化，监听就可以知道然后去执行。例如从讲师列表到添加讲师，路由发生变化，监听就可以发现。
增加监听方法：在代码created{}功能模块下添加代码：
watch:{ //监听
$route(to,from) { //写法固定，表示路由变化方式，路由发生变化，方法就会执行
console.log('watch $route')
this.init()
}
},
将 created 中的判断代码添加到 methods 中，用 init()进行抽取，即
methods:{
init(){
//判断路径有 id 值，做修改
if(this.$route.params&& this.$route.params.id) {
//从路径获取 id 值
const id=this.$route.params.id
//调用根据 id 查询方法
this.getInfo(id)
}else{//路径没有 id 值，做添加
//清空表单
this.teacher={} //清空 teacher 就可以
}
},
然后去掉 created 中的代码，修改为
created(){//页面渲染之前进行
this.init()
},
并修改监听方法：
watch:{
$route(to,from) {
console.log('watch $route')
this.init()
}
},
最后来测试，打开页面，点击讲师列表，点击修改，数据回显后点击添加讲师，效果如图，数据清空
什么是监听？
例子：
汽车，在汽车上装报警器，报警器在状态发生变化时会响，报警器就是监控汽车状态的变化，
比如：颤动，报警器会响，这是典型的例子。
这是一个原理，当路由发生切换和变换，里面的监听器就会执行，然后做清空。
