created(){
if(this.$route.params && this.$route.params.id){
//从路径获取id值
const id =this.$route.params.id
//调用根据id查询的方法
this.getInfo(id)
}else{//路径中没有id
//清空清单
this.teacher={}
}
}
当进行路由跳转,两次都跳转到一个页面的时候,在页面渲染之前执行的created()方法只会在第一次的时候执行
如上图代码第一次跳转的时候
如图所示路径中是有id值的,所以执行上述代码中if中的代码片段
当前几添加讲师的时候
如图所示是没有id值的,应该执行else中的代码片段,但是,前面已经说了第二次执行的时候不会执行created()的所以不会执行else中的代码片段,所以得使用watch监听器
修改代码
created(){
this.init()
},
*/
watch:{//路由监听
$route(to,from){//路由变化方式,路由发生变化的时候,方法就会执行
this.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={}
}
},
}
watch路由监听就是当路径发生改变得时候执行
这样做的话,当第一次点击有id值的时候执行created->init()中的if中的方法,当再此页面中点击修改的时候,路由发生了改变,则被 watch路由监听器监听执行监听器中的方法,监听器中的方法与created中的一样,只不过是路径中没有id'值了,所以执行的是init中的else语句。从而实现执行this.teacher={}