Three reasons why keep-alive cached pages do not take effect

Table of contents

1. The name attribute in the component is inconsistent with the name attribute field in the route, causing it to not take effect!

Edit

2. The KeepAlive attribute is not set in the meta attribute of the route or the value of the KeepAlive attribute is false. 

3. Routing at level three and above does not work, and the cache is invalid.

1. The name attribute in the component is inconsistent with the name attribute field in the route, causing it to not take effect!

2. The KeepAlive attribute is not set in the meta attribute of the route or the value of the KeepAlive attribute is false. 

3. <Keep-Alive> does not work for level three and above routes, and the cache becomes invalid.

I rewrapped <router-view> directly on the secondary route, and the caching problem was perfectly solved!

I saw other bloggers also shared the flattening of routing, which can also solve the problem.