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

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

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

img

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

路由配置

{
    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,但其实是别的地方出现了错误。

试试路由改改

img

然后把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>