vant3的tabbar无法跳转到默认路由

Question

问题遇到的现象和发生背景

在使用vant3的tabbar组件遇到了莫名其妙的问题。我跟着教程敲的代码（之后在网上搜索也是如此），但是并没有出现与教程一样的效果。我在点击第二个tab【问答】的时候第一个的样式竟然没有消失，在重新点击第一个【首页】的时候，竟然没有反映，控制台没有报错。如果在地址栏输入地址，是可以完成跳转的。

问题相关代码，请勿粘贴截图

路由配置

{
    path: "/",
    name: "layout",
    component: () => import("../views/layout/index.vue"),
    children: [
      {
        path: "",
        name: "home",
        component: () => import("../views/home/index.vue")
      },
      {
        path: "/qa",
        name: "qa",
        component: () => import("../views/qa/index.vue")
      },
      {
        path: "/video",
        name: "video",
        component: () => import("../views/video/index.vue")
      },
      {
        path: "/my",
        name: "my",
        component: () => import("../views/my/index.vue")
      },
    ]
  }

layout/index.vue

<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="active" route> 
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/qa">问答</van-tabbar-item>
      <van-tabbar-item icon="video-o" to="/video">视频</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/my">{{ userState ? "我的" : "未登录" }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

我尝试过的方法

我后来将属性route删除，发现竟然达到了教程的效果。请问这个route属性有什么说法吗？还是说应该加上route，但其实是别的地方出现了错误。

Answer 1

试试路由改改

然后把route加回去，首页的to改下，然后子项全部加上replace试试

<van-tabbar v-model="active" route> 
      <van-tabbar-item replace icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item replace icon="search" to="/qa">问答</van-tabbar-item>
      <van-tabbar-item replace icon="video-o" to="/video">视频</van-tabbar-item>
      <van-tabbar-item replace icon="contact" to="/my">{{ userState ? "我的" : "未登录" }}</van-tabbar-item>
</van-tabbar>