Home  >  Article  >  Web Front-end  >  What are the three ways to implement tab in Vue?

What are the three ways to implement tab in Vue?

藏色散人
藏色散人Original
2023-01-29 14:49:392264browse

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.

What are the three ways to implement tab in Vue?

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.

What are the three ways to implement tab in Vue?

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

What are the three ways to implement tab in Vue?

# 2. Component switching.

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

What are the three ways to implement tab in Vue?

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

Achieved through router-link.

What are the three ways to implement tab in Vue?

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

What are the three ways to implement tab in Vue?

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

What are the three ways to implement tab in Vue?

//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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn