使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問題及解決方法

更新時(shí)間：2018年09月07日 08:57:42 作者：木石心

這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下

vue-router 該如何使用

忽然碰到一個(gè)常見的問題，明明可以使用 v-if / v-show 可以的解決的問題，有沒有必要是使用 vue-router來解決。比如常見的 tab 切換。一時(shí)間，我有些猶豫了，有沒有必要濫用 vue-router。那到底何時(shí)用才叫合理呢？

先上代碼，用兩種方式實(shí)現(xiàn)的效果

使用vue-router

router

import Tab1 from './components/tab/TabOne'
import Tab2 from './components/tab/TabTwo'
import Tab3 from './components/tab/TabThree'
import Tab4 from './components/tab/TabFour'
const routes = [
 {path: '/tab1', component: Tab1},
 {path: '/tab2', component: Tab2},
 {path: '/tab3', component: Tab3},
 {path: '/tab4', component: Tab4},
]
const router = new VueRouter({
 routes
})

.vue 文件中

<div class="tab">
 <router-link to="/tab1">tab1</router-link>
 <router-link to="/tab2">tab2</router-link>
 <router-link to="/tab3">tab3</router-link>
 <router-link to="/tab4">tab4</router-link>
 <router-view></router-view>
</div>

使用 v-if/v-show

.vue

<div class="tab">
 <button @click="handleTab(1)">tab1</button>
 <button @click="handleTab(2)">tab2</button>
 <button @click="handleTab(3)">tab3</button>
 <button @click="handleTab(4)">tab4</button>
 <div v-if="isShow === 1"><Tab1 /></div>
 <div v-if="isShow === 2"><Tab2 /></div>
 <div v-if="isShow === 3"><Tab3 /></div>
 <div v-if="isShow === 4"><Tab4 /></div>
</div>
/**
 * script
 */
 data () {
  return {
   isShow: 1
  }
 },
 methods: {
  handleTab (v) {
   this.isShow = v
  }
 }

效果如下

上方為路由
下方為v-if

目前看起來效果一致。那就從另一個(gè)角度考慮，頁面結(jié)構(gòu)。

vue-router

v-if

總結(jié)：

目前看起來，效果沒有很大區(qū)別，代碼量也沒有減少
使用原生，可能是用索引進(jìn)行關(guān)聯(lián)，在vue中推薦使用數(shù)據(jù)進(jìn)行驅(qū)動(dòng)
暫且記錄一筆，以待后期繼續(xù)研究

以上所述是小編給大家介紹的vue-router與v-if實(shí)現(xiàn)tab切換的思考，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下
2023-11-11
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的
2023-04-04
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）
如果想要獲取選中的日期時(shí)間就需要通過,Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）,感興趣的朋友一起看看吧
2023-10-10
Vue中訪問指定鏈接并解析頁面內(nèi)容的完整指南
在現(xiàn)代Web開發(fā)中,經(jīng)常需要從其他網(wǎng)頁獲取并解析內(nèi)容,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)這一功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
vue中的v-model原理,與組件自定義v-model詳解
這篇文章主要介紹了vue中的v-model原理,與組件自定義v-model詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue如何判斷安卓還是IOS
這篇文章主要介紹了vue如何判斷安卓還是IOS，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
面試題：react和vue的區(qū)別分析
這篇文章主要介紹了react和vue的區(qū)別分析，在面試中經(jīng)常會(huì)遇到，小編通過實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
Vue中封裝input組件的實(shí)例詳解
這篇文章主要介紹了Vue中封裝input組件的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-10-10