Vue.js 当我单击导航选项卡时，它将不会处于活动状态。为什么？当我单击两次时，它将激活。但只需单击一下，它就会转到相应的页面

这是我的html编码。我使用dynamic类来激活导航选项卡。如果有比这更好的方法，请建议我。这对我会有很大帮助

导出默认值{
安装的（）{
本条。创建（“破折号”）；
},
数据（）{
返回{
仪表板主题：“”，
票务主题：“，
completeTheme:“”，
主题：“，
配置主题：“”，
主题：“，
规则主题：“，
};
},
方法：{
已创建（价值）{
如果（ticvalue==“破折号”）{
this.dashboardTheme=“活动”，
this.ticketTheme=“”，
这个.completeTheme=''，
this.tatTheme=''，
this.configTheme=''，
这个.slaTheme=''，
this.ruleTheme=“”
}否则如果（ticvalue==“票证”）{
此.dashboardTheme=“”，
this.ticketTheme=“活动”，
这个.completeTheme=''，
this.tatTheme=''，
this.configTheme=''，
这个.slaTheme=''，
this.ruleTheme=“”
}否则，如果（ticvalue==“完成”）{
控制台日志（“complr”）
此.dashboardTheme=“”，
this.ticketTheme=“”
此参数为.completeTheme=“活动”；
this.tatTheme=''，
this.configTheme=''，
这个.slaTheme=''，
this.ruleTheme=“”
}否则如果（ticvalue==“tat”）{
this.dashboard主题=“”，
this.ticketTheme=''，
这个.completeTheme=''，
此.tatTheme='active'，
this.configTheme=''，
这个.slaTheme=''，
this.ruleTheme=“”
}else if（ticvalue==“配置”）{
this.dashboard主题=“”，
this.ticketTheme=''，
这个.completeTheme=''，
this.tatTheme=''，
此.configTheme='active'，
这个.slaTheme=''，
this.ruleTheme=“”
}否则如果（ticvalue==“sla”）{
this.dashboard主题=“”，
this.ticketTheme=''，
这个.completeTheme=''，
this.tatTheme=''，
this.configTheme=''，
此.slaTheme='active'，
this.ruleTheme=“”
}else if（ticvalue==“规则”）{
this.dashboard主题=“”，
this.ticketTheme=“”
这个.completeTheme=''，
this.tatTheme=''，
this.configTheme=''，
这个.slaTheme=''，
此.ruleTheme='active'
}
}
}
};

---

这是我的剧本。这里我使用

active

突出显示选项卡。我尝试了这么多的可能性，但我不会得到答案。有人帮我解决这个问题。

您可以使用Vue的事件修饰符

。在
@单击
调用时防止
：

将代码中的
@click=“…”
调用更改为
@click.prevent=“…”

这将阻止单击事件的默认行为（跟随链接）

Bro现在它可以工作了，但我无法重定向到相应的页面。