During Nuxt development, you will encounter the need to control the display and hiding of global components. For example, the mobile terminal route navigation bar, head back operation…

In order to switch the page, determine whether to display global components, to ensure a smooth transition of page display.

The following is a method I used in the project, which has been implemented.

1. Handled in Middleware, which can be configured globally or directly into the Page component.

The following figure is directly configured globally:

Use the Middleware in combination with Vuex.

Make global state judgments in VUEX and use computed in conjunction with them.