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

Editor to share with you how keep-alive in vue to achieve list page caching, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Demand:

Browse the item list page, enter the product details, and click to return to the location where you browsed before.

Achieve:

Use the include property of vue's keep-alive to dynamically cache the component, return it unchanged from the details page, and refresh it when entering the list page from other pages

Add a list page that needs to be cached to define a dataset in vuex

State: {pageListArr: []}

The name of the list page is proList, and the name of the details page is proDetail. Only the fields contained in PageListArr are cached, such as pageListArr.push ("proList").

Train of thought:

Before the page initialization, get the name of the source page and the name of the page to load.

Use global navigation guards here

Router.beforeEach ((to, from, next) = > {/ / Source page name-> from.name / / go to the page name-> to.name / / if the page to be redirected is a list of items And do not return or jump to if (to.name=== `proList` & & from.namelist` = `proDetail`) {pageListArr.push (`proList`)} / / the source returns the list page if (to.name=== `proList` & & from.name=== `proDetail`) {proList` (`do not process `)}})

When multiple different list pages need to set up cache, such as classified item list, active item list

You need to determine whether some pages have been cached by pageListArr. Only if you return the cached list page from the business details will there be no refresh. The uncached list page still needs new cache.

The above is all the content of the article "how to implement list page caching in keep-alive in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.