Full page refresh

1. Modify app. vue with the following code:

<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: Return {reload: this.reload}}, data() {return {isRouterAlive: true } }, methods: { reload() { this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true }) } } } </script>Copy the code

The key points are as follows:

2. Use inject to the page to be refreshed and reference reload:

3. Just call this.reload() in the method you want to call

Second, local refresh

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

2. Define the partial refresh method reloadPart:

3. Call in a method that needs to perform a partial refresh

Three, application scenarios

1. When some data is dynamically modified in the page, either by props or by funcation, the latest data may not be displayed after modification.

2. When the page data changes, there will be a bug in the page rendering. For example, the EL-Table component will show a blank area after the data changes.

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

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

2. Check off a display column and the page renders normally:

3. Check the checked display column again, and a blank area appears:

In this case, just call the partial refresh method this.reloadPart() in the radio method, and the same is true for all.

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