SoFunction
Updated on 2025-04-04

Detailed explanation of page caching issues in vue (based on 2.0)

For example, there is a list page, and each item in the list has a detailed information. When used before, there was basically no problem with the page cache.

In vue2.0, the list page appears, and the data is reloaded every time, but the details page only calls the data when it is loaded for the first time. If you return to the list and enter the details, the page will not re-render the page. Maybe you are a novice. This problem has troubled me for a long time and has not been able to solve it...

According to the official documentation of vue-router,

watch: {
  // If the route changes, the method will be executed again  '$route': 'fetchData'
 }

This is what I wrote, but the page still has not been rendered

.

.

.

So I thought about it, thought about it...

I thought the route had not changed, so I added the parameters including the timestamp after the page route

But none of this problem was solved

……

After many attempts, I finally found the problem

The watch method detects routing changes indeed took effect, but some key data on the page is not cleared or cached last data, so the data will not be re-rendered every time the page is loaded. Therefore, the key data is found and the key data is reset every time the route changes.

For example:

for(var i =0; i<; i++) {
      if([i].id = ) {
        = [i]
      }
     }
 watch: {
   '$route': function () {
     = []
    ()
     = this.$
   }
  }

My key data here is orderId

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.