vue-router與v-if實現tab切換的思考

vue-router 該如何使用

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

先上代碼，用兩種方式實現的效果

使用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

目前看起來效果一致。那就從另一個角度考慮，頁面結構。

• vue-router

• v-if

靜態頁面沒區別，現在考慮傳參，進行數據請求渲染

• vue-router 進行參數傳遞

//修改上述代碼 
<!-- router -->
{path: '/tab1', name: 'tab1', component: Tab1},
{path: '/tab2', name: 'tab2', component: Tab2},
{path: '/tab3', name: 'tab3', component: Tab3},
{path: '/tab4', name: 'tab4', component: Tab4}
<!-- .vue -->
<button @click="jump(1)">tab1</button>
<button @click="jump(2)">tab2</button>
<button @click="jump(3)">tab3</button>
<button @click="jump(4)">tab4</button>
<router-view></router-view>
<!-- script -->
jump (n) {
  this.$router.push(
    {
    name: 'tab'+n, 
    params: {
      id: n, 
      data: {
        a: 1, 
        b: 2, 
        c: 3}
      }
    }
  )
}

效果圖

在修改router中代碼時，需要修改為命名式路由才可以，這樣有利於傳參而不會在url地址中顯示

<!-- demo -->
<!-- router -->
{path: '/ke/:id', name: 'ke', component: Tab1}
<!-- script -->
this.$router.push({
  name: 'ke',
  params: {
    id: 1,
    val: 'url中看不見我'
  }
})

效果

使用v-if結合vuex實現

<!-- vuex -->
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        tab: {
            tab1: {},
            tab2: {},
            tab3: {},
            tab4: {}
        }
    },
    mutations: {
        setTabData (state, data) {
            state.tab[data.type] = data.data
        }
    }
})
export default store

<!-- 傳值到vuex -->
...mapMutations([
  'setTabData'
]),
handleTab (v) {
  this.isShow = v
  const data = {
    type: 'tab'+v,
    data: {
      a: 1,
      b: 2,
      c: 3
    }
  }
  this.setTabData(data)
}

<!-- 具體組件中使用 -->
<!-- template -->
<ul>
  <li v-for="(v, key, i) in tab" :key="i" >
    {{v}} === {{key}}
  </li>
</ul>
<!-- script -->
computed: mapState({
  tab: state => state.tab.tab1
})

結果

因而在tab中使用 vue-router的方式進行傳參，會相對比較方便，而使用v-if時，則需要借助vuex，每次都需要盡所有指定的參數放到vuex中，在下一個組件中，再去vuex中進行獲取。這樣而言，導致代碼量多一些。當然使用得當也很好。特別是現在有些公司不許使用vuex，只能使用EventBUS 那是不是在使用v-if方式實現時，更加麻煩呢？

總結

• 目前看來可能使用vue-router會更加好一些（但是依舊值得深究）
• 使用原生，可能是用索引進行關聯，在vue中推薦使用 數據進行驅動
• 暫且記錄一筆，以待后期繼續研究

感悟： 使用這些天來，發現使用路由跳轉也許會更好，首先傳參不用考慮那么多，其次也不會馬上加載出來，而tab有可能會馬上加載出來。同時使用路由可以進行路由懶加載，這樣會更好，因而在考慮若是頁面上的其他組件並不是及時顯示，是否使用路由或許會更好

20181010補充

這幾天一直在填自己曾經作死的坑， 由於使用v-if組件出現后就沒有了生命周期函數，這樣頁面始終會保留上一個狀態，雖然很不理解，明明是 v-if 應該不會如此，但是事實卻是沒有了生命周期函數，導致數據清空需要手動來，這樣嚴重有問題。因而思來想去下次還是用路由更穩妥