javascript - 使用 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 事件来切换 bool 值并以这种方式设置一个类，但我没有取得太大的成功。

Answer 1

您可以使用 $route 对象检查路由名称并将其绑定(bind)到事件 Prop 。

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