Question # 1: How does Vue force DOM refresh

As shown in the figure below, the developed business scenario is: click the left navigation, the right side displays the title of the problem, click the title to enter the specific content page, and then click the left navigation or back button to return to the title page.

Problems encountered during development

Click content A–> Title I –> Enter the content page, click content A again can not return to the title page of content A.

The solution

Use V-if and $nextTick to refresh and reload the content page component on the right. The code is as follows:

<router-view v-if="hackReset" />
Copy the code

Js code:

data(){
    return{
        hackReset:false}}sidebarClick(index, indexPath, vnCode) {
        // Click the sidebar to force a refresh of the component
        this.hackReset = false;
        ` `'// $nextTick is a delayed callback after the next DOM update loop, // $nextTick is used after the data is modified, $nextTick(() => {this.hackreset = true; }); . }Copy the code

The principle is to use V-IF to complete the destruction and reconstruction of child components. Drawing tool: Excalidraw