Bulma navbar and VueJS router active link

问题:

I've started using Bulma 0.7.1 and VueJs 2.5.17. Now, I'm using Vue router component and I'd like to make the buttons in the navigation bar to be set as active whenever I'm on the "page" represented by the link.

My code is the following

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

I know that router component uses class router-link-active to mark the active link. But Bulma probably requires the is-active class applied to the current button.

How should I automate this? I've read that probably I should bind the class is-active to the router-link-active, but I tried:

let routes = ...

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

And did not worked.

Any hint is really appreciated.

回答1:

You are on the right track and are right, 'is-active' is the answer. In router add.

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

And construct your HTML like.

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

This works for me so I guess there's some issue with the order of your div's or classes.

回答2:

Check Bulma Guide, is-active is one modifier, you have to use it together with bulma element.

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

So change the configuration to like linkActiveClass: 'tag is-active' it will work well.

Like below demo which uses tag (you can choose others like box, button etc):

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>