Shulou(Shulou.com)06/01 Report--

This article will explain in detail how keep-alive routing multi-level nesting does not work. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

problem

A problem was found that the multi-level nested routing cache page did not take effect. In fact, some people on the Internet flatten the route and then deal with the menu, but I think it is better to solve this problem from the root. Take a look at how keep-alive works by the way. In fact, according to the name of the component, if the name of the component to be rendered hits the cache array, then the component in the cache is directly taken for rendering. At the same time, the hit cache is associated with a parent-child component.

The following will be explained according to this picture

Positioning problem

Keep-alive is actually based on the name of the component. If the name of the component to be rendered hits the cache array, then the component in the cache is directly taken for rendering. That is, the rendering of a page is based on a component, and if the component hits the cache, it will be cached. If there is no cache, the following sub-components will no longer judge the cache hit and render again.

We define the name attribute on the route to determine whether the current component is destroyed when the route jumps in the form corresponding to the name and the component name. In fact, keep-alive is based on the component name to determine whether to keep alive, so the reason why multi-level routing does not take effect is obvious. Multi-level routing we have an intermediate component to act as a routing container. However, we do not define the component name of this routing container component, so there is no way to cache the last layer of components.

That is, there is no name defined in our layout and wrapper/index.vue components, so even if the name of the Summary component is passed to the include of keep-alive, the parent cannot be found, so it is impossible to hit the cache of the component in the next rendering.

Solution

As can be seen from the problem location, we can add the component name to the ok level by level. However, there is a problem. Layout and wrapper/index.vue are reused by multiple components, which will cause the middle components of all my pages to be cached.

So, our dynamic component name is o, so we directly take the corresponding routing value according to hash to assign value to component name.

Additional questions and answers

We have a tab-view component that can turn off cached pages, but now a secondary page caches two components, a third-level page caches three components, and the same parent also relies on the parent component, that is, when the two pages of summary and fabInventory are actually cached, the four components Inventory,InventoryManagement,summary and fabInventory are cached, so when you clear the summary, you should also consider whether he has a sibling route to be cached. If it exists, the parent level cache, which is an upward recursive judgment

This is the end of the article on "what if the multi-level nesting of keep-alive routing does not work". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.