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

Vue how to achieve page refresh and local refresh, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

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, have you mastered how to achieve page refresh and local refresh in vue? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.