Vue has the same routing address but different parameters, the page does not refresh, listens to the route

1. Problem description

The same routing address, but when passing parameters are different, such as adding or modifying the passed parameter id is different, it is not necessary to pass the id when adding, and pass the id when modifying, and the modified id may be different, at this time switch the page , found that the data on the page was not refreshed or cleared.

2. Solutions

Monitor route changes, compare the current route with the previous route, reassign or request data if the parameters are different, to achieve page refresh

watch: {
    
    
  // 监听路由是否变化
  '$route' (to, from) {
    
     
    console.log('to', to, 'from', from);
    if(to.query.id!= from.query.id){
    
    
      this.id= !to.query.id? '' : to.query.id // 重新赋值，页面会发生变化
      // 需要重新请求接口时，可以在此处调用接口方法
    }
  }
},

This will successfully resolve