Realize the reuse of components with different routing parameters and monitor the changes of routing parameters

1. Premise
   When using different routing parameters , The original component instance will be reused . Because both routes render the same component , Rather than destroy and recreate , Reuse is more efficient . however , This also means that the component's lifecycle hook is no longer called . Therefore, we need to monitor the changes of routing parameters to get different data rendering effects of the page
2. Use watch Listen for changes in routing parameters

watch: {
    
  //  Used to monitor routing parameters '$route.params.id' The change of ,handler Method represents the action taken after listening to the change of routing parameters , Parameters newVal Represents the new value 
 '$route.params.id': {
    
      handler (newVal) {
    
        console.log(newVal);
        // Here is the action to be performed after monitoring the parameter change 
      },
      immediate: true,
      deep: true
    }
}

watch See the official website for the usage of and the response to changes in routing parameters api：
link 1
link 2