首先把tabbar中的元素写在一个list中用v-for进行渲染
用一个interface进行定义接口，这样别人在review你的代码就可以清晰知道你的tabbar包含什么元素。
利用typescript特性进行类型定义，可以省去很多麻烦

import { reactive } from "vue"
import { Images } from "src/static/images"
export interface Tabbar {
  iconPath: string,
  selectedIconPath: string,
  text: string,
  url: string
}

export const tabBarList = reactive<Tabbar[]>([
  {
    iconPath: Images.Home,
    selectedIconPath: Images.HomeActive,
    text: '首页',
    url: '/pages/home/home',
  },
  {
    iconPath: Images.Personal,
    selectedIconPath: Images.PersonalActive,
    text: '我的',
    url: '/pages/personal/personal',
  }
])

<template>
  <view class="tabbar-container">
    <view v-for="(item, index) in tabBarList" :key="index" :url="item.url" :class="{ 'active': activeIndex === index }"&g