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)}

2、删除 node_modules ，到 package.json 中将 vue-router 改为 3.0.7 ，重新 npm i 即可。

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

用session实现html登录页面跳转页面跳转页面跳转,js判断登录与否并确定跳转页面的方法...
这篇文章主要介绍了js判断登录与否并确定跳转页面的方法,涉及Ajax及session使用的技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供 ...
html 登录判断跳转页面跳转页面,js判断登录与否并确定跳转页面的方法
本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供大家参考.具体如下: 使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面. 判断本地有无customerID: fun ...
vue跳转页面的方法
** vue跳转页面的方法 ** 1.router-link跳转  <router-link to='/index'><button>点击 ...
微信小程序两种跳转页面的方法
步骤一:添加新页面在小程序目录下的pages文件下新建文件下,命名为news 在app.json中添加新的页面"pages/news/news" 此时news文件夹下出现四个配置 ...
java alert跳页面_JavaScript中通过提示框跳转页面的方法
通过提示框跳转页面具体代码如下所示: Document window.onload = function(){ //设置当页面加载时执行 var btn =document.getElementsBy ...
解决微信小程序自定义tabbar跳转页面图标闪动问题
情况一如果你的tabbar对应的页面是component,那就在component下面加上其中的selected是该tab页面对应的索引值 pageLifetimes: {show() {i ...
html js验证登录页面,js判断登录与否并确定跳转页面的方法
本文实例讲述了js判断登录与否并确定@R_384_404@面的方法.分享给大家供大家参考.具体如下: 使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面. 判断本地有无custome ...
（第4讲）servlet跳转页面的方法
1.HttpServletResponse的sendRedirect方法:先写一个登录界面,如果用户名和密码正确跳转到欢迎界面,否则仍在登录界面 /** * 登录界面 */ package c ...
asp.net服务器端跳转页面的三种方法
asp.net服务器端跳转页面的三种方法 1.Response.Redirect这个跳转页面的方法跳转速度不快,因为它要走2次回发(postback). 它可以跳转到任何页面,没有站点页面限制(可以由 ...

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

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

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

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

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

最新文章

热门文章

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

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

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

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

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

最新文章

热门文章

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