使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問(wèn)題及解決方法
vue-router 該如何使用
忽然碰到一個(gè)常見(jiàn)的問(wèn)題，明明可以使用 v-if / v-show 可以的解決的問(wèn)題，有沒(méi)有必要是使用 vue-router來(lái)解決。 比如常見(jiàn)的 tab 切換。一時(shí)間，我有些猶豫了，有沒(méi)有必要濫用 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
目前看起來(lái)效果一致。那就從另一個(gè)角度考慮，頁(yè)面結(jié)構(gòu)。
vue-router
v-if
總結(jié)：
- 目前看起來(lái)，效果沒(méi)有很大區(qū)別，代碼量也沒(méi)有減少
- 使用原生，可能是用索引進(jìn)行關(guān)聯(lián)，在vue中推薦使用 數(shù)據(jù)進(jìn)行驅(qū)動(dòng)
- 暫且記錄一筆，以待后期繼續(xù)研究
以上所述是小編給大家介紹的vue-router與v-if實(shí)現(xiàn)tab切換的思考，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過(guò)大、很慢等情況,為了解決這一問(wèn)題,跟后端配合做了一個(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)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的2023-04-04
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）
如果想要獲取選中的日期時(shí)間就需要通過(guò),Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）,感興趣的朋友一起看看吧2023-10-10
Vue中訪問(wèn)指定鏈接并解析頁(yè)面內(nèi)容的完整指南
在現(xiàn)代Web開發(fā)中,經(jīng)常需要從其他網(wǎng)頁(yè)獲取并解析內(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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue如何判斷安卓還是IOS，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了react和vue的區(qū)別分析，在面試中經(jīng)常會(huì)遇到，小編通過(guò)實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了Vue中封裝input組件的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-10-10