Vue implements 3 ways to switch tabs and switch to maintain data status

3 ways to implement tab switching in Vue

1. v-show controls content switching

1. Simple version principle: Use click event to change num value as a switch to control tab style and content display and hiding.

2. Data rendering principle: mainly use the index bound by v-for to control, which is similar to the above.

2. Component switching.

1. The main knowledge points are the characteristics of is in vue and keep-alive cache

3. Route switching. (Friendly for address bar and data request)

This is accomplished through router-link.

vue tab switch keeps data status

When switching tabs on a page, since the component will be re-instantiated every time it is switched, we want the content in the tab to remain unchanged no matter how the page is switched, reducing page re-rendering and requests.

Implementation method: Use <keep-alive></keep-alive> to wrap the component

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="Record">
    <keep-alive>
      <child1 v-if="isChildUpdate"></child1>
    </keep-alive>
  </el-tab-pane>
</el-tabs>

Jump to details on the list page, and keep the last operation status on the list page

This is achieved by loading router-view and setting the routing meta page to cache.

If router-view is nested in multiple layers, you may need to set up multiple layers, and then use beforeRouteLeave to listen to the route leaving and set whether to cache

// Jumping from other pages does not require caching of pages. Returning from the details page requires caching.

Summarize

This concludes this article about 3 ways to implement tab switching in Vue and how to maintain data status during switching. For more information about Vue tab switching methods, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!