vue2 How to cache multi-layer list pages using keep-alive

Vue's display of list pages and details pages is quite troublesome. After clicking on the list page to return to the details page, the list page will be refreshed again. If the data found on the fifth page is clicked to modify and then jump back to the first page, you need to use keep-alive to cache the page data, but the page cached by keep-alive will not change, especially when there are many levels of list pages, which is more complicated.

For example, a management page in my background has been very complicated because the data correlation is very complicated, so I have made three-layer list page nesting. Click management on the previous layer to perform data display in the next layer. Each layer list page contains 3 to 4 data that needs to be displayed in a loop. Before joining keep-alive I organized the page using routing and custom components.

Route to the details page, then load the list page component display, and then obtain the data in the component module through props:['id']

import Vmothod from '../page/';
import VsystemParam from '../page/';
import VsystemError from '../page/';
<template>
 <div>
  <Vmothod :></Vmothod>
  <VsystemParam :></VsystemParam>
  <VsystemError :></VsystemError>
 </div>
</template>

However, in this way, after returning to the previous layer or modifying the data back, because there is no page cache, the number of pages will become the first page, which is very inconvenient to use.

After looking for related solutions online, I tried to add keep-alive parameters to the route.

meta: { keepAlive: true }

 <keep-alive>
  <router-view v-if="$"></router-view>
 </keep-alive>
 <router-view v-if="!$"></router-view>

This solves the problem of page not being cached, but after jumping, all pages have the same data, which is very wrong. The background found that it also needs to add a hook function to pull data when the page is initialized.

 activated(){
  ();
 }

But I found that it still doesn't work. The parameters passed to the component through props:['id'] on the previous page will also be cached. In this way, props cannot be used, and only by passing parameters in the route.

With id parameters when routing

path:'/method/:id'

Then get the parameters on the component page

self.$

In this way, the current page parameters of the details page are finally smoothly cached.

The above method of using keep-alive to cache multi-layer list pages in vue2 is all the content I share with you. I hope you can give you a reference and I hope you can support me more.