Vue.js 突出显示活动的b-nav-item在数据刷新时不工作

我试图在单击b-nav项目时将其激活。我的导航条本身就是一个组件

topnav.vue

<b-navbar-nav class = "ml-5">
                <b-nav-item :active= "tab === 1" @click="tab = 1" class = "navitem" to = "/">tab1</b-nav-item>
                <b-nav-item :active= "tab === 2" @click="tab = 2" class = "navitem" to = "/tab2">tab2</b-nav-item>
                <b-nav-item :active= "tab === 3" @click="tab = 3" class = "navitem" to = "/tab3">tab3</b-nav-item>
</b-navbar-nav>

<script>
export default {
data() {
    return {
        tab:1,
    }
},
</script>

表1
表2
表3
导出默认值{
数据（）{
返回{
表1：，
}
},

每当我单击另一个选项卡时，它会将活动选项卡保持在1，因为我认为该页面正在刷新，因此导致该选项卡再次加载1。我当前正在使用路由器链接在不同选项卡之间导航。是否有其他方法可以解决此问题？谢谢