一、根据当前路由处理展示图标

 import {useRoute, useRouter} from 'vue-router';

const table = ref(['/', '/home', '/user']);
let router = useRouter();

watch(
    () => router.currentRoute.value.path,
    newValue => {
    // 通过indexOf拿到当前下标
      active.value = table.value.indexOf(newValue);
    },
    {immediate: true},
  )

二、路由配合底部tabbar配置

 //首页
  {
    path: '/',
    name: 'Home',
    components: {
      default: () => import('@/views/home/index.vue'),
      optMenu: () => import('@/components/TabBar.vue'),
    }, 
    props: true
  }

// APP.vue
 <div>
    <router-view/>
    <router-view name="optMenu"/>
  </div>