[Bug Report] 当路由地址配置了可选参数时，Tabbar路由模式选中情况下无法自动高亮

fightingsun commented 2 years ago

重现链接

https://codesandbox.io/s/distracted-field-swwlof?file=/src/view/layout.vue

Vant 版本

3.5.2

描述一下你遇到的问题。

Tabbar 启用路由模式首页路由path中配置了可选参数，当点击tabbar中首页item时，路由跳转，但item不会自动高亮，去掉可选参数即可恢复高亮个人页路由未配置参数，点击个人页item时可跳转可高亮

期望当存在可选的路由参数时，能匹配自动高亮

重现步骤

路由配置

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      component: () => import("./view/layout.vue"),
      redirect: "home",
      children: [
        {
          // 如果去掉可选参数，tabbar item即可高亮
          path: "home/:id?",
          name: "home",
          component: () => import("./view/home.vue")
        },
        {
          path: "profile",
          name: "profile",
          component: () => import("./view/profile.vue")
        }
      ]
    }
  ]
});

设备/浏览器

chrome

littleomar commented 2 years ago

tabbarItem的to参数可以写成对象 https://youzan.github.io/vant/#/zh-CN/tabbar#tabbaritem-props 改成 <van-tabbar-item :to="{name: 'home'}" icon="home-o">首页</van-tabbar-item>就能高亮了