VantUi 底部Tabbar跳轉(zhuǎn)頁面的兩種解決辦法

image.png

<van-tabbar v-model="active"> 通過active來顯示底部的菜單顏色切換效果

  <van-tabbar v-model="active" v-if="$route.meta.isShowTabbar">
    <van-tabbar-item to="/wyyx" icon="home-o">首頁</van-tabbar-item>
    <van-tabbar-item to="/toptic" icon="bookmark-o">專題</van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">分類</van-tabbar-item>
    <van-tabbar-item to="/cart" icon="shopping-cart-o">購物車</van-tabbar-item>
    <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

第一種方法實(shí)現(xiàn)底部Tabbar：使用計(jì)算屬性(computed)進(jìn)行(if判斷 / switch case)

 //通過這個(gè)獲取到網(wǎng)頁的路徑 ps:this.$route(只讀)，this.$router(跳轉(zhuǎn))
  mounted() {
    console.log(this.$route.path);
  },

  computed: {
    active: {
      get(){
        switch (this.$route.path) {
        case "/wwyx":
          return 0;
        case "/toptic":
          return 1;
        case "/category":
          return 2;
        case "/cart":
          return 3;
        case "/user":
          return 4;
        default:
          break;
      }
      },
      set(){}
    }
  }

image.png

需要加上get()和set(),不然報(bào)錯(cuò)

image.png

點(diǎn)擊跳轉(zhuǎn)的時(shí)候控制臺(tái)報(bào)錯(cuò)產(chǎn)生的這個(gè)問題 ，重復(fù)的重定向引起vue-router報(bào)錯(cuò)。。。

解決辦法有兩種：

1. 在router里的index.js加上這一段代碼：

// 解決Vue-Router升級(jí)導(dǎo)致的Uncaught(in promise) navigation guard問題

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location, onResolve, onReject) {

  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)

  return originalPush.call(this, location).catch(err => err)

}

2. 刪除 node_modules ，到 package.json 中將 vue-router 改為 3.0.7 ，重新 npm i 即可。

第二種方法實(shí)現(xiàn)底部tabber：通過在路由加上meta屬性

image.png

設(shè)置對(duì)應(yīng)的meta的num屬性

//在頁面上獲取到路由meta上的num值

  mounted() {
     console.log(this.$route.meta.num);
  },

//把v-model換成$route.meta.num
<template>
  <van-tabbar v-model="$route.meta.num" v-if="$route.meta.isShowTabbar">
    <van-tabbar-item to="/wyyx" icon="home-o">首頁</van-tabbar-item>
    <van-tabbar-item to="/toptic" icon="bookmark-o">專題</van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">分類</van-tabbar-item>
    <van-tabbar-item to="/cart" icon="shopping-cart-o">購物車</van-tabbar-item>
    <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

這個(gè)方法存在bug，會(huì)出現(xiàn)tabbar出現(xiàn)亂跳轉(zhuǎn)的問題，推薦還是用switch的方法。