Shulou(Shulou.com)05/31 Report--

This article mainly explains "Vue setting keepAlive does not take effect how to solve", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Vue setting keepAlive does not take effect how to solve" it!

Setting keepAlive does not take effect

As demonstrated, the Vue page is refreshed after the navigation rollback, and the search conditions and results are reset. For the system where the page needs to be switched frequently, the experience is not good. We hope that the page will be loaded when the page is opened for the first time, and then the fallback will not be refreshed.

After consulting the official website of Vue, it is found that vue2.0 provides a keep-alive component.

1. Settings in App.vue 2. Index.js settings in router

Take advantage of meta attribute

Export default [{path:'/', name:'home', components:Home, meta: {keepAlive:true / / components that need to be cached}, {path:'/book', name:'book', components:Book, meta: {keepAlive:false / / components that do not need to be cached}]

Normally, the page can be cached and take effect, if it still doesn't take effect.

Check that the configuration name of this component in the router file is inconsistent with the name in the component instance. For example, the name of to or from obtained in the global guard is obtained from the corresponding routing object in router, while the exclude in the keepAlive tag in App.js is the name in the contrasted component instance.

During the usage process, it is found that the name of the component is different from the name configured by router, and the keep-alive cannot take effect. This also provides us with a way to set the name differently if the page does not need caching (not recommended).

Background of potholes where the keep-alive cache component does not work

When maintaining the company code, it is found that the watch route does not take effect and cannot listen to the table handoff of child routes. The component is not cached, but the global component has been cached. Each time you enter this table page here, the created cycle is triggered. It took more than half an hour to finally find the problem.

The cause of the pit

When caching keep-alive, the name in the include must be exactly the same as the name on the component. If the component does not write the name or the name is inconsistent, the cache will fail. Every time you enter the component, the created life cycle will be triggered.

The code is as follows

In the global component

In the component

Export default {name: "history", / * the name here must have and be consistent with the include * / components: {VTable}. At this point, I believe you have a deeper understanding of "how to solve the problem that the Vue setting keepAlive does not take effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.