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

This article mainly introduces the vue details jump to the list page to achieve list page cache related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this vue details jump to the list page to achieve list page cache method article will have a harvest, let's take a look at it.

Originally thought that scrollBehavior should be satisfied, but in practice, it is found that if the list is paged, the location will not be located to the clicked position.

After going around on the Internet, I finally found a method that suits me-- beforeRouteLeave

Note: beforeRouteLeave only works on first-level pages and does not apply to other secondary or other level pages in children

The above is the preparatory work, and then we can get down to business:

Find the entry mount page: App.vue wraps a keep-alive tag outside the router-view

Because not all pages need to be cached, add the name value to the page that needs to be cached, and add the name value to the keep-alive

Of course, these alone cannot be cached.

At first, I learned the method on the Internet. I wrote that when I clicked into the details page from the list, I assigned the keepalive value of the list page to true (implement cache).

BeforeRouteLeave (to, from, next) {if (from.path = ='/ sale/newGoods/index' & & to.path = ='/ goods/detail') {from.meta.keepAlive = true; this.loading = true; next (); return} else {from.meta.keepAlive = false; _ window.location.reload (); this.$destroy (); next (); return}}

But in the later stage, Father A found a bug: when I click on the list to enter the details, if I click directly from the details page and click to enter the list page of other stores, that is, list 2, the list of items displayed in the latest list page is the previous data and has not become the latest store list content, that is, the items displayed on the list 2 page are still those in list 1

Play too much, this problem is more anxious, ah, in case the customers around the dizzy, people do not buy things, then I am not guilty of it?

At night, taking advantage of the dark wind and the stillness of the night, I thought hard and finally dug up this social cancer.

I am by no means succumbed to the obscene power of father A, just because of my obsession with technology, the excessive pursuit of perfection, and the emergence of such a big loophole in not talking about my things.

It depends on the solution. Come here directly, ↓.

First discard the method of the list page above

Step 1: find the product details page, one of the protagonists, I used beforeRouteEnter, beforeRouteLeave here

BeforeRouteEnter (to, from, next) {next (vm = > {vm.formUrl = from.path; console.log (vm.formUrl)});}, beforeRouteLeave (to, from, next) {to.meta.keepAlive = false; if (to.path = = this.formUrl) {to.meta.keepAlive = true; next (); return} else {to.meta.KeepAlive = false; window.localStorage.removeItem ('isRefresh') this.$destroy (); next () Return}}

BeforeRouteEnter: the function executed before entering the route (the route that gets listing 1)

BeforeRouteLeave: the function executed before leaving the route (the route that gets listing 2)

Through these two hooks, you can successfully get the routing of the other two protagonists of the event (listing 1, listing 2).

In the details page, before leaving the page, make a route comparison between lists 1 and 2 in beforeRouteLeave

If the two routes are the same, the to.meta.keepAlive value is true, and the list page is cached (for example, when returning from the details page)

If the two routes are different, the jump page has changed (for example, from shoes and hats list-> shoes products-> shoes list), then the shoes list page does not need to be cached and needs to be refreshed to get the latest shoe list data.

Step 2: deal with the second protagonist of the event-list page

I only use beforeRouteEnter here.

In this hook, we can get the keepLive value of the current page.

This value is already given in the details page

If it is true, it is cached, otherwise it is not cached (refreshed)

To prevent the page from constantly refreshing and becoming a death function, we declare a variable isRefresh in data

IsRefresh: window.localStorage.getItem ('isRefresh') | | truebeforeRouteEnter (to, from, next) {next (vm = > {if (to.meta.keepAlive! = true & & to.meta.keepAlive! = null) {vm.goods= [] Window.localStorage.setItem ('isRefresh',true) if (JSON.stringify (window.localStorage.getItem (' isRefresh'))! = false) {window.localStorage.setItem ('isRefresh',false) location.reload ();}}); return}

If the to.meta.keepAlive value of the current page is not true and the value exists, the page needs to be refreshed

Prevent the page from being refreshed all the time

Window.localStorage.setItem ('isRefresh',true)

Set the cache variable isRefresh with a value of true (indicates refresh is required)

When the to.meta.keepAlive value is not true and the isRefresh value is true, the page is refreshed, and the isRefresh is assigned to false, the refresh is turned off.

Vm.goods= []; is when the page skips to the new list page before refreshing, there will be a brief list display, in order to avoid unnecessary misleading, when it is detected that the jump to the new list page, I will list the goods list situation, the visual feeling will be better

This is the end of the article on "how to achieve list page caching by redirecting details to list pages in vue". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to jump to the list page to achieve list page cache in vue". If you want to learn more, you are 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.