What are the three ways to implement tab in Vue?

Vue implements tabs in three ways: 1. Control tab content switching through "v-show"; 2. Implement tab switching through the is feature and "keep-alive" cache in vue; 3. Through "router" -link" to implement routing switching.

The operating environment of this tutorial: Windows 10 system, vue3 version, DELL G3 computer

What are the three ways to implement tab in vue?

3 ways for vue to implement tab switching and switching to maintain data status

3 ways for vue to implement tab switching

1. v-show Control content switching

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

#2. Data rendering principle: mainly controlled by the index bound to v-for, similar to the above.

# 2. Component switching.

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

3. Route switching. (Friendly to the address bar and data requests)

Achieved through router-link.

vue tab switching maintains data status

When the page performs tab switching, since the component will be re-instantiated every time it is switched, we If you want the content in the tab to not be refreshed no matter how the page is switched, reducing page re-rendering and reducing requests

Implementation method: usewrapped component

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

List page jump details, the list page keeps the last operation status

This is achieved by whether to load the router-view and routing meta meta setting page whether the page needs to be cached

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

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

Recommended learning: "vue video tutorial"

The above is the detailed content of What are the three ways to implement tab in Vue?. For more information, please follow other related articles on the PHP Chinese website!