Detailed tutorial on implementing tab page switching/creating tab components by vue

vue realizes tab page switching [Details]

There are two ways to implement tab page switching in vue:

① Use dynamic components

② Use routing

Of course you can use a third-party ui to achieve it, such as Element Plus. But it would be better to try to implement it yourself.

Here we will talk about the first and second methods, focusing on component implementation, so let’s first talk about the way to use routing.

Use routing to implement Tab switching

First, in the router folder file, configure the routing of subpages

 {
      path: '/Profile',
      name: 'Profile',
      meta:{
        showHead:true,
        path:'Personal Center'
      },
      component: () => import('../views/'),
      children:[
        {
          path:'article',
          name:'article',
          component: () => import('../components/')
        },
        {
          path:'picture',
          name:'picture',
          component: () => import('../components/')
        }
      ]
    },

Just in case you don't know, the path uses '/xx' as the root path, and the use of 'xxx' will automatically splice it.

Nested paths starting with / will be treated as the root path. This allows you to take advantage of component nesting without having to use nested URLs.

Then release our combination of punches and

 <div class="column">
          <router-link to="/profile/article" name="article">article</router-link>
          <router-link to="/profile/picture" name="picture">picture</router-link>
 </div>
 <div class="content">
          <router-view></router-view>
</div>

Use component dynamic components to implement Tab switching

The general idea is as follows: First, each tab has a panel.

Secondly, we hope that the tab and its panel can be associated, so they should have the same characteristics, so we think of id. We can use the same number for each group of male and female guests, so that we only need to look at the number to know who corresponds to whom!

Finally, everyone knows that dating is one-on-one. Therefore, when we dating a male (mtab-1) and a female (panel-1), other female guests cannot appear.

The display and hidden control components can be used with v-if/v-show.

Use isShow to record the current male guest (mtab).

Use the array panelShowList to record whether each female guest (panel) appears.

The approximate framework is like this:

<div class="column">
  <button class="mtab"  @click="clickTab">0</button>
  <button class="mtab"  @click="clickTab">1</button>
  <button class="mtab"  @click="clickTab">article</button>
</div>
<div class="content">
  <div class="panel"  v-if="panelShowList[0]">
    I'm content
  </div>
  <div class="panel"  v-if="panelShowList[1]">
    I'm content1
  </div>
  <div class="panel"  v-if="panelShowList[2]">
    I'm content2
  </div>
</div>

Don't forget that isShow and panelShowList have initial values. Men and women at the opening ceremony, arrangements!

data(){
    return{
      isShow:0,
      panelShowList:[1,0,0]
    }
  }

I almost forgot to give a close-up of the male guest to add some eye-catching style to the selected tab.

        <div class="column">
          <button class="mtab"  @click="clickTab" :class="{highlightTab:panelShowList[0]}">0</button>
          <button class="mtab"  @click="clickTab" :class="{highlightTab:panelShowList[1]}">1</button>
          <button class="mtab"  @click="clickTab" :class="{highlightTab:panelShowList[2]}">article</button>
        </div>

ps: panelShowList stores the appearance status of female guests, and the array subscripts are the same numbers for male and female guests.

Then, we began to think about how to make the guests on both sides of Tab and Panel appear in pairs?
Answer: Of course, they have to hold hands with each other and succeed!

We have already done our best to deal with the IDs of both parties before, so it is simple now.

First of all, to obtain the man's ID, it is wrong, it is the tab's ID.

 clickTab(e){
      ('My number is',(5)) 
       = (5)

Then we need the host to call the female guest to appear, no. It is to use the watch listener to the isShow property. As long as isShow changes, it means that the male guest currently appears has changed. Therefore, the previous female guest is immediately notified to leave the stage and the corresponding female guest will appear.

watch:{
    isShow(newValue,oldValue){
      [oldValue]=0
      [newValue]=1
    }
  }

Here we expand a knowledge point, that is, the deep monitoring of watch.

The default watch is shallow: the listened property will trigger the callback function only when a new value is assigned - and the changes in nested properties will not trigger. If you want to listen for all nested changes, you need a deep listener:

OK, here we successfully implemented the tab page switching function.

Summarize

This is the article about vue implementing tab page switching/making tab components. For more related vue tab page switching content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!