使用 BootstrapVue 和 VueJs 切换活动导航项

Question

目前使用 VueJs 和 Bootstrap Vue，我想知道如何使用将“活动”标签附加到我设置的导航链接。

   <div>
        <b-nav tabs align="center">

            <b-nav-item>
                <b-link to="/">Home</b-link>
            </b-nav-item>

             <b-nav-item>
                <b-link to="/table">Table</b-link>
            </b-nav-item>

        </b-nav>
    </div>

我怎样才能把它变成以下内容？

    <div>
        <b-nav tabs align="center">

            <b-nav-item>
                <b-link to="/" active>Home</b-link>
            </b-nav-item>

             <b-nav-item>
                <b-link to="/table">Table</b-link>
            </b-nav-item>

        </b-nav>
    </div>

我试过@click 事件来切换布尔值并以这种方式设置一个类，但我没有取得太大的成功。

Answer 1

您可以使用 $route 对象来检查路由名称并将其绑定到 active prop。

<b-link to="/table" :active='$route.name =="Table"'>Table</b-link>