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

This article will explain in detail how to refresh the current page of the vue project. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Scene

When working with lists, there is often a need to refresh the current page after deleting a piece of data or adding new data.

two。 Problems encountered

1) use vue-router to reroute to the current page, and the page is not refreshed

2) when using window.reload () or router.go (0) to refresh, the whole browser is reloaded, flashes, and the experience is not good.

3) solution

Provide / inject combination

Role: allows an ancestral component to inject a dependency into all its descendants, no matter how deep the component level is, and always takes effect when the upstream and downstream relationship is established.

App.vue:

Declare the reload method to control whether the router-view is shown or hidden, thereby controlling the reloading of the page

TableList.vue:

The reload dependency provided by the App.vue component (provide) is injected into the page. After the logic is completed (delete or add...), the current page can be refreshed by directly calling this.reload ().

4.provide / inject usage

Provide: the option should be an object or a function that returns an object. This object contains properties that can be injected into its descendants.

Inject: an array of strings, or an object whose key is the local binding name

Tip: provide and inject bindings are not responsive. It was done on purpose. If you pass in a listener object, the properties of its object are still responsive.

= =

In-depth understanding of data-driven

The above can be regarded as a pit in the development process. It took some time. When I read the code again today, I felt very badly cheated.

1. Get list method

two。 Recapture data

3. In this way, when you call to get the data again, you can synchronously update the page data (without re-refreshing the page), while ensuring that when there are pages, you can stay on the current page (if it is the second page before refreshing, it will still be on the second page after refreshing)

That is, other query conditions remain the same, the experience effect is good.

This is the end of this article on "how to refresh the current page of the vue project". 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.