Refresh subcomponents under vue.js keep-alive

keep-alive, was introduced to save the number of pages in Pagination, which was added on the outermost part of App.vue, but the refresh of the subcomponents encountered a problem.

The path of the

sub-component is / subject/:id. I hope that each time the incoming id is captured in the sub-component, the new data will be obtained (the data acquisition is put in the mounted), but it will not be refreshed every time the keep-alive, is used.
then I thought of using watch:$route.params.id, but in this way watch will be activated twice when entering the subcomponent and leaving (id has changed twice). How can he capture changes in id only when he comes in?

if you have a problem with your thinking, please help to point it out. Thank you

.

you can put the number of Pagination pages in vuex or create a global variable, and then store it in localstorage.


data() {
  id: this.$route.id,
  watched: false
},
watch: {
   
    id: function (newId, oldId) {
      if (!this.watched) {
        doFetch();
      }
      this.watched = !this.watched;
    }
  },

I don't know that your vue version is hooked by keep-alive components in version 2.2.0 or above. You can operate in this hook

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9949b-474fe.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9949b-474fe.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?