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

2019-11-19 13:00:27

字體：大中小

供稿：網(wǎng)友

vue-router 該如何使用

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

先上代碼，用兩種方式實現(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  } }

效果如下