Ionic Tabs来自同一模块时异常：点击后两标签同时激活

开发者阿泽

2026-8-4

解决同一模块下多标签页同时激活的问题

问题根源

这种情况基本是因为标签页的激活状态判断用了前缀匹配逻辑——比如只要当前路由包含lob/就标记为激活，导致lob/first和lob/second两个路径都会触发激活条件。

解决建议

改用精确路径匹配
把激活判断改成严格匹配完整路由路径。比如用Vue的router-link时，加上exact属性强制精确匹配；如果是自定义逻辑，直接对比当前路由的fullPath和标签页目标路径是否完全一致。
示例（Vue）：
```
<router-link to="/lob/first" exact active-class="active">lob/first</router-link>
<router-link to="/lob/second" exact active-class="active">lob/second</router-link>
```

自定义激活判断逻辑
要是框架自带的匹配规则不满足需求，自己写判断逻辑更灵活。比如在React里，通过当前路由路径单独判定每个标签的激活状态：

const currentPath = useLocation().pathname;

<TabItem 
  isActive={currentPath === '/lob/first'}
  onClick={() => navigate('/lob/first')}
>lob/first</TabItem>
<TabItem 
  isActive={currentPath === '/lob/second'}
  onClick={() => navigate('/lob/second')}
>lob/second</TabItem>

用路由名称做匹配依据
给同一模块下的两个子路由分别设置唯一的name属性，激活判断时匹配路由name而非路径，彻底避免前缀干扰。
示例（路由配置）：
```
const routes = [
  {
    path: '/lob/first',
    name: 'LobFirst',
    component: LobFirstComponent
  },
  {
    path: '/lob/second',
    name: 'LobSecond',
    component: LobSecondComponent
  }
];
```
之后判断激活时用$route.name === 'LobFirst'这类逻辑即可。