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

Today to talk to you about vue to achieve full page or local refresh method is what, many people may not understand, in order to let you better understand, the editor summed up the following content, I hope you can get something according to this article.

How to realize page refresh in vue

one。 Full page refresh

1. Modify App.vue. The code is as follows:

Export default {name: 'App', provide () {/ / the parent component returns data to be passed to subordinates return {reload: this.reload}}, data () {return {isRouterAlive: true}}, methods: {reload () {this.isRouterAlive = false this.$nextTick (function () {this.isRouterAlive = true})}

The key points are shown in the following figure:

two。 Use inject to import to the page that needs to be refreshed and reference reload:

3. Call this.reload () in the method that needs to be called.

Second, local refresh

1. Define a variable isReloadData and bind it to the label that needs to be refreshed:

two。 Define the local refresh method reloadPart:

3. Called in a method that needs to perform a local refresh

Third, application scenarios

When some data is dynamically modified in the page, or the data brought by props, or the properties dynamically set through funcation, the latest data may not be displayed after the modification.

When the page data changes, but the page rendering will appear bug, for example, the el-table component after the data change, there will be a blank area.

At this point, full page refresh or partial refresh will come in handy. The following screenshot illustrates the second case I encountered, which has been solved by using full page refresh and local refresh:

1. Select all by default, and the page rendering is normal:

two。 Check a display column, and the page will render normally:

3. Check the unchecked display column again, and there will be a blank area:

At this point, you only need to call the local refresh method this.reloadPart () in the selected method, and the same is true for all selections.

4. Each time a new display column is added, a blank area will appear in the table. In this case, we only need to call the full page refresh method this.reload () after the new record is successfully added.

After reading the above, do you have any further understanding of the method of full page or local refresh in vue? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.