van-tabbar跳转当前页带修改参数带route当前页所有参数

最新推荐文章于 2025-02-12 11:42:07 发布
最新推荐文章于 2025-02-12 11:42:07 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： vue 前端 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ss_Tina/article/details/127900153
版权

van-tabbar有两个tab跳转一个页面，但是参数不同，有可能链接有很多参数，所以都要带上。

 

 代码：

 <van-row>
          <van-col span="24">
              <van-tabbar v-model="tabbarActive" @change="changeTab">
                  <van-tabbar-item>分类1</van-tabbar-item>
                  <van-tabbar-item>分类2</van-tabbar-item>
                  <van-tabbar-item>我的</van-tabbar-item>
              </van-tabbar>
          </van-col>
        </van-row>

tabbarActive默认设置为0

最低0.47元/天 解锁文章
vant tabbar底部导航的使用
m0_38109616的博客
03-29 1558
新建home.js {{item.title}} }, methods: {}, }; {{item.title}} }, methods: {}, }; 再router.js写入 import Vue from ‘vue’ import Router from ‘vue-router’ Vue.use(Router
vantUI应用（Tabbar标签页）返回上一页的失效问题
草巾冒小子的博客
10-13 2422
使用了vantUI框架的（Tabbar标签页）组件，开发了个页脚固定导航： 我的操作说明： 登录页 /login 登录成功后，进入首页 / 然后选择首页页脚导航，个人中心 /personal 发现在点击个人中心返回按钮的时候，直接返回到了登录页，为什么呢？ 原因分析 · （源码分析）： 经过项目对应文件的源代码查看（导航组件【代码如下】）和 vantUI组件的官方解说，原来是因为使用了 关键词：replace （是否在跳转时替换当前页面历史），导致页面的历史路由记录被替换了。所以浏览器点击返
微信小程序用vant自定义tabbar页面并跳转相应页面
这个Bug怎么解啊？
01-31 1万+
微信小程序用vant自定义tabbar并跳转相应页面
VantUI封装自定义Tabbar路由跳转
热门推荐
明知山
08-30 1万+
效果图 点击不同的图标切换不同路由，并且切换自定义图片 因为这是个底部栏，需要把它封装成组件，我这里有三个底部栏地址，就需要被引到三个地方 组件tabbar.vue <template> <van-tabbar v-model="active" active-color="red"> <van-tabbar-item v-for="(item,inde...
vant4 van-tabbar组件使用
qq_46738283的博客
02-12 450
vant4 van-tabbar组件使用。
van-tab跳转新页面并切换标签页面空白异常处理
weixin_44307574的博客
06-13 812
微信小程序携带tab参数跳转新页面并调用子组件相关接口页面空白
利用vant给tabbar配置路由
simple5960的博客
10-26 9797
1.在父级路由写tabbar标签 <template> <div class="layoutContainer"> <!-- 子路由出口 --> <router-view></router-view> <!-- 底部导航栏 --> <!-- 给tabbar--route属性 然后给每一项to属性就可以路由跳转了 --> <van-tabbar v-model="active"
vant 组件van-tabbar实现底部导航
yeyazi001的博客
04-06 5662
移动端小白，首次尝试移动H5开发，使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤，项目中使用全局引用。由于查询很多文章有的过于复杂，有的功能未实现，所以简单整理如有问题欢迎留言改正。底部导航栏简单实现，需要注意的是，组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。
vant组件 tabbar 路由路径及高亮问题
m0_66970349的博客
07-15 569
刚好做黑马头条demo时，发现按照视频操作，出现下面问题，点击切换第一个图标一直高亮，且再次点击切换第一个点不了,其他的没问题。定义v-model 的active的值,防止其他页面刷新高亮回到首页，需要根据路由切换不同的active的值。在layout.vue页面 to属性由默认 ' ' 更改为 'home'不用忘记在路由页面定义 子路由的active属性。删除route，添加v-model。1. 父路由添加重定向。
vue van-tabbar组件底部导航在同一个页面来回切换动态设置title
LZL_68的博客
09-20 743
vue van-tabbar组件底部导航在同一个页面来回切换动态设置title
Vant封装Tabbar路由跳转
maxue20161025的博客
12-14 1154
本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现，分享给大家，
【Vant2】Tab标签页组件自动跳转的坑
weixin_44707049的博客
05-26 1992
使用Vant2写的一个商城，在首页有商品分类目录，比如说数码、家具、美妆等大分类，如下： 点击某个类比就会跳转到另一个页面，另一个页面中使用Tab显示分类，同时页面中显示对应分类下的商品目录，如下： 需求是：在首页点击 “电脑办公” 分类，跳转后Tab标签应该也自动定位到 “电脑办公”页签下，并且显示对应分类的商品列表。 问题是：跳转页面后Tab页签无法正确跳转到对应的页签下，但是显示的商品列表是正确的。 根据Vant2的Tab组件文档，我使用的是通过名称name来匹配激活的标签，name绑定的是分类目
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
NanChen的博客
08-01 1258
这里稍微注意一下动态的name要绑定循环的列表中的name。首先我们这里要给前一个页面配置相应的数据结构。这里是通过Pinia去写✈️。
微信小程序使用van组件Tabbar 标签栏
小香菜子的博客
05-15 1903
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。（8）按需引入，在对应的page页面的 .json文件中的usingComponents属性中通过路径找到@vant引入你想使用的组件。（2）与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）（1）打开我们小程序的项目目录，然后打开文件所在的位置。（5）修改 app.json。
关于vant 的tabbar功能
a_grain_of_wheat的博客
10-19 1412
关于vant 的tabbar , 非tabbar页面和tabbar页面的高亮显示
vant组件库tabbar页面切换，跳转子页面tabbar隐藏，子页面跳转
Ann_52547的博客
11-03 3738
vant组件库tabbar页面切换，跳转子页面tabbar隐藏，子页面跳转
微信小程序自定义tabBar之van-tabbar 结合switchTab ,切换时二次点击才会修改图标状态bug
qq_34907249的博客
09-02 2341
active: getApp().globalData.tabIndex // 控制哪一项是选中状态。this.getTabBar() 看下此时data中active （举例） 字段的值，还是上一次的。如果去掉switchTab其实可以正常切换状态的，问题应该出在wx.switchTab这里。其实active已经修改了，只是又莫名其妙被改过来了，在切换的页面中，修改控制状态字段的变量值，可以打印。微信文档其实是有提示的，只不过说的过于简单，不能理解。
微信小程序自定义tabBar以及图标-使用vant-weapp
qq_39990347的博客
12-11 4027
records
VantUi 底部Tabbar跳转页面的方法以及产生的Bug问题
ScumStudy的博客
11-17 3066
第一种方法：使用计算属性(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-it
<router-view /> <van-tabbar route> <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item> <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item> </van-tabbar> 为啥主页总是高亮
最新发布
03-23
<think>好的，我现在需要帮助用户解决在Vue.js中使用van-tabbar时主页始终高亮的问题。首先，我需要了解van-tabbar是哪个UI库的组件，应该是Vant的移动端组件库。用户的问题是在使用这个组件时，主页的标签栏一直保持高亮状态，可能是在路由切换时没有正确更新激活状态。 接下来，我需要回忆Vant的van-tabbar的用法。通常，van-tabbar通过v-model绑定一个变量来控制当前激活的标签。这个变量应该与路由的路径或索引相关联。如果用户没有正确绑定这个变量，或者没有在路由变化时更新它，就会导致高亮状态不变化。 然后，我应该考虑路由的变化如何影响van-tabbar的状态。在Vue.js中，可以使用vue-router，通过监听路由变化来更新激活的标签索引。例如，在进入主页路由时，将激活的索引设为对应的值。 可能还需要检查用户是否正确配置了路由的元信息（meta字段），以便在切换路由时获取对应的标签索引。此外，用户可能在组件初始化时没有正确设置初始值，导致主页一直高亮。 另外，用户可能没有使用v-model双向绑定，或者绑定的变量没有响应式更新，这也是常见的问题点。需要确保active变量是响应式的，并且在路由变化时被正确修改。 最后，可能需要提供一个代码示例，展示如何结合vue-router和van-tabbar，通过watch监听路由变化，并更新active的值，从而正确高亮对应的标签。同时，提醒用户注意路由配置中的元信息和van-tabbar的route属性是否正确设置。</think>### Vue.js中van-tabbar主页始终高亮的解决方案 #### 1. 检查路由绑定 Vant的`van-tabbar`组件通过`v-model`绑定当前激活标签的索引值。若主页始终高亮，可能是未正确绑定路由状态： ```javascript <van-tabbar v-model="active" route> <van-tabbar-item to="/home" icon="home-o">主页</van-tabbar-item> <van-tabbar-item to="/category" icon="apps-o">分类</van-tabbar-item> </van-tabbar> // 需确保active与当前路由匹配 data() { return { active: this.$route.meta.tabIndex || 0 } } ``` 注意`route`属性的启用可实现路由自动匹配[^1]。 #### 2. 监听路由变化 在路由守卫中同步激活状态： ```javascript watch: { '$route'(to) { this.active = to.meta.tabIndex } } ``` 需在路由配置中添加元信息： ```javascript // router.js { path: '/home', component: Home, meta: { tabIndex: 0 } } ``` #### 3. 强制刷新组件（特殊场景） 当动态修改路由参数时，可使用`key`强制刷新： ```html <van-tabbar :key="activeKey"></van-tabbar> ``` #### 4. 验证vant版本 确保使用vant 3.x+版本，旧版本可能存在路由绑定问题： ```bash npm list vant ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值