vant组件 tabbar 路由路径及高亮问题

一、问题描述

 刚好做黑马头条demo时，发现按照视频操作，出现下面问题，点击切换第一个图标一直高亮，且再次点击切换第一个点不了,其他的没问题

二、解决问题

1. 父路由添加重定向

在layout.vue页面 to属性由默认 ' ' 更改为 'home'

 

2.to 搭配 name

3.v-model 和 route 二选一

此时需要删除route，添加v-model = "active"

① active 的值 为数字

定义v-model 的active的值,防止其他页面刷新高亮回到首页，需要根据路由切换不同的active的值

不用忘记在路由页面定义 子路由的active属性

②active 的值为路由对应 name 的值

看见vant官网的描述，active的值在标签有name属性的情况下，是name的值

此种方法可以直接使用name,而不用像上面一样还需要为路由额外配置 active属性

为标签添加 v-model 和 name

定义active的值，当前路由的name值

三、总结

  底层原理不太清楚，希望清楚的大神可以帮忙解释一下,只知道照着官网来咯

① 如果添加route，则父路由需要重定向

②如果添加v-model,需要删除route，绑定active的值时，一定要注意随着当前路由变化，不能写死，不然刷新下面高亮会出错