How to refresh partial content of the page in Vue3

To achieve partial refresh of the page, we only need to implement the re-rendering of the local component (dom). In Vue, the easiest way to achieve this effect is to use the v-if directive.

In Vue2, in addition to using the v-if command to re-render the local dom, we can also create a new blank component. When we need to refresh the local page, jump to this blank component page, and then In the beforeRouteEnter guard in the blank component, it jumps back to the original page.

How to click the refresh button in Vue3.X to reload the DOM in the red box and display the corresponding loading status? .

Due to the script setup syntax in Vue3. and onBeforeRouteUpdate two APIs, so we use the v-if directive to re-render the local dom to achieve this requirement. Step 1: Define the state identifier

Define a

isRouterAlive

identifier refresh state in the global state, and re-render based on changes in isRouterAlive. isLoading Identifies the loading status.

import { defineStore } from 'pinia'
export const useAppStore = defineStore({
  id: 'app',
  state: () =>
    ({
      isRouterAlive: true,
      isLoading: false
    } as { isRouterAlive: boolean; isLoading: boolean })
})

The second step, borrow the v-if instruction to re-render the dom node

The third step, modify the isRouterAlive value to realize the re-rendering of the dom

The above is the detailed content of How to refresh partial content of the page in Vue3. For more information, please follow other related articles on the PHP Chinese website!