问题阐述：

今天在写vue对后台数据的修改功能时，刚写完没觉得什么不对，发现第一次点击修改按钮能正常读取该条信息的后端数据并填进输入框，但是第二次及其以后点击修改按钮时，输入框中仍然是第一次读取到的数据。经检查，后端代码没有错误，问题就发生在前端页面。

前置代码：

mounted(){
  this.loadData()  //进入页面时就调用函数
},
methods:{
    loadData(){  //根据id值获取数据
      let that = this;
      let id = this.$route.query.id
      //console.log(id)
      getById(id).then((res)=>{
        console.log(res)
        //把接收到的数据放入表单的输入框中
        that.form = res.data.data
      })
    }
}

问题截图：

操作表如下

当我修改第二条数据，第一次点击修改按钮时：

数据成功读取且id值也传了过来

点击取消，返回上一级页面后，再次修改第三条数据，第二次点击按钮时：

可以看到，id值发生了变化，但是读取到的数据还是和第一次的一样

 

解决办法： 

 虽然我在跳转页面时就调用了函数loadData()来根据id获取数据，但是没有监听路由

在export default中加上这段代码后就可以成功读取到每一次修改的数据了！

  //监听旧数据
  watch:{
    '$route':'loadData'
  }

注：loadData是方法名 

解决后截图：

修改第二条时，点击取消返回到主界面

 再点击按钮修改第三条：