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

本文主要是介绍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.pushVueRouter.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)}