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

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

需要加上get()和set(),不然报错

<template>
  <div>
    <van-tabbar v-model="active" active-color="darkred" inactive-color="#666">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="label-o" to="/topic">专题</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

export default {
  // data() {
  //   return {
  //     active: 0,
  //   };
  // },
  //通过这个获取到网页的路径 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(){}
    }
  }
  
};
</script>

<style lang="scss" scoped>
</style>

第二种方法：通过在路由加上meta属性

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

点击跳转的时候控制台报错产生的这个问题 ，重复的重定向引起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 即可。