Question

当前正在使用VueJs和Bootstrap Vue，我想知道如何在我设置的Nav链接后附加“ active”标签。

   <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对象检查路线名称并将其绑定到活动的道具。

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

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

1 个答案: