vue3+vant4的tabbar配置路由

打算弄个类似淘宝的来练手熟悉vue3的setup写法，vant4底部tabbar的使用官网描述的不是很清晰，所以在这里记录一下怎么配置路由

<template>
    <div>
        <router-view></router-view>
        <van-tabbar v-model="active" route>
            <van-tabbar-item name="home" icon="home-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item name="message" icon="chat-o" badge="9" to="/message">消息</van-tabbar-item>
            <van-tabbar-item name="cart" icon="shopping-cart-o" to="/car" >购物车</van-tabbar-item>
            <van-tabbar-item name="my" icon="manager-o" to="/my">我的tb</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script setup>
    import {ref} from 'vue'
    const active = ref('home') // 默认首页
</script>

主要是路由的配置，tabbar对应的路由必须要配在children里面，不然不会显示

import { createRouter,createWebHashHistory} from 'vue-router'

const routes = [
    {
        path:'/index',
        name:'index',
        redirect:'/home',
        component:()=>import('../views/index.vue'),
        children:[
            {
                path:'/home',
                name:'home',
                component:()=>import('../views/home.vue')
            },
            {
                path:'/message',
                name:'message',
                component:()=>import('../views/message.vue')
            },
            {
                path:'/car',
                name:'car',
                component:()=>import('../views/car.vue')
            },
            {
                path:'/my',
                name:'my',
                component:()=>import('../views/my.vue')
            },
        ]
    },
]

const router = createRouter({
    history:createWebHashHistory(),
    routes
})

export default router;

最后是这样子的

参考文章：利用vant给tabbar配置路由