Bulma 导航栏和 VueJS 路由器处于活动状态 link

Question

我已经开始使用 Bulma 0.7.1 和 VueJs 2.5.17。现在，我正在使用 Vue 路由器组件，并且我想让导航栏中的按钮在我位于由 link 表示的 "page" 时设置为活动状态。

我的代码如下

<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>

我知道路由器组件使用 class router-link-active 标记活动 link。但是 Bulma 可能需要将 is-active class 应用于当前按钮。

我应该如何自动执行此操作？我读过可能我应该将 class is-active 绑定到 router-link-active，但我试过了：

let routes = ...

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

并没有奏效。

非常感谢任何提示。

Answer 1

检查Bulma Guide，is-active是一个修饰符，必须和bulma元素一起使用。

Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes. They all start with is- or has-.

所以把配置改成喜欢linkActiveClass: 'tag is-active'这样就可以了。

就像下面使用 tag 的演示一样（您可以选择其他像 box、button 等）：

let UserView = Vue.component('user', {
  template: '<div>I am User</div>'
})

let AdminView = Vue.component('admin', {
  template: '<div>I am Admin</div>'
})

const router = new VueRouter({
  linkActiveClass: 'tag is-active',
  routes: [
    {
      path: '/Admin',
      name: 'Admin',
      component: AdminView
    },
    {
      path: '/User',
      name: 'User',
      component: UserView
    }
  ]
})
Vue.use(VueRouter)
app = new Vue({
  el: "#app",
  router
})

.loading {
  background-color:red;
  font-weight:bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <h2>Test Vue Router</h2>
    <router-link to="Admin">Admin</router-link>
    <router-link to="User">User</router-link>
    <router-view></router-view>
</div>

Answer 2

你走在正确的轨道上并且是正确的，'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 或类的顺序有问题。

Bulma 导航栏和 VueJS 路由器处于活动状态 link

Bulma navbar and VueJS router active link

vuejs2

bulma