VantUi 底部Tabbar跳转页面的方法以及产生的Bug问题

VantUi 底部Tabbar跳转页面的两种解决办法

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>

第一种方法实现底部Tabbar：使用计算属性(computed)进行(if判断 / switch case)

 //通过这个获取到网页的路径 ps:this.$route(只读)，this.$router(跳转)
  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(),不然报错

image.png

点击跳转的时候控制台报错产生的这个问题 ，重复的重定向引起vue-router报错。。。

解决办法有两种：

1. 在router里的index.js加上这一段代码：

// 解决Vue-Router升级导致的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 即可。

---

第二种方法实现底部tabber：通过在路由加上meta属性

image.png

设置对应的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>

这个方法存在bug，会出现tabbar出现乱跳转的问题，推荐还是用switch的方法。