Bulma 导航栏和 VueJS 路由器活动链接

Question

我已经开始使用Bulma 0.7.1和VueJs 2.5.17。现在，我正在使用 Vue 路由器组件，并且我希望每当我位于链接表示的“页面”上时，将导航栏中的按钮设置为活动状态。

我的代码如下

<template>
    <div id="app">
        <nav class="navbar" role="navigation" aria-label="main navigation" id="nav">
            <div class="container">
                <div id="navMenu" class="navbar-menu">
                    <div class="navbar-end">
                        <a class="navbar-item is-active">
                            <router-link to="/" exact>Home</router-link>
                        </a>
                        <a class="navbar-item">
                            <router-link to="/about" exact>About</router-link>
                        </a>
                        <a class="navbar-item">
                            <router-link to="/project" exact>Project</router-link>
                        </a>
                    </div>
                    <div class="navbar-end">
                    </div>
                </div>
            </div>
        </nav>

        <router-view/>

    </div>
</template>

我知道路由器组件使用类router-link-active来标记活动链接。但布尔玛可能需要is-active应用于当前按钮的类。

我应该如何自动化这个？我读过，也许我应该将类绑定is-active到router-link-active，但我尝试过：

let routes = ...

new VueRouter({
  mode: "history",
  routes,
  linkActiveClass: "is-active"
});

并没有奏效。

任何提示真的很感激。

Answer 1

您走在正确的轨道上并且是对的，“is-active”就是答案。在路由器中添加。

export const router = new VueRouter({
    mode: 'history',
    routes,
    linkActiveClass: 'is-active'
})

并像这样构造你的 HTML。

<nav class="navbar is-white">
        <div class="container">
            <div id="navMenu"
                 class="navbar-menu">
                <div class="navbar-start">
                    <router-link :to="{ name: 'templateInfo' }"
                                 class="navbar-item">Template info</router-link>
                    <router-link :to="{ name: 'thirdpartylibraries' }"
                                 class="navbar-item">Third party libraries</router-link>
                </div>
            </div>
        </div>
    </nav>

这对我有用，所以我猜你的 div 或类的顺序存在一些问题。