Using vue-router, how can I make menu selected styles?

Question

I'm using vue routers to create a single-page application. I have a navigation system where clicking on a menu item takes them to the corresponding page. For example:

var pageView = require('./components/pageView.vue')

// Define some components
var Boards_page = Vue.extend( {
    template: '<p>Boards</p>'
})

var Fantheories = Vue.extend( {
    template: '<p>Character</p>'
})

// The router needs a root component to render.
// For demo purposes, we will just use an empty one
// because we are using the HTML as the app template.
// !! Note that the App is not a Vue instance.
var App = Vue.extend({})

// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
var router = new VueRouter({
    history: true
})

// Define some routes.
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
router.map({
    '/': {
        component: pageView
    },
    '/boards': {
        component: Boards_page
    },
    '/fantheories': {
        component: Fantheories_page
    }
})

// Now we can start the app!
// The router will create an instance of App and mount to
// the element matching the selector #app.
router.start(App, '#container')

How would I make it so that whatever URL I'm on the menu item has a different CSS style so it appears as if its selected?

Answer 1

The router option linkActiveClass determines the class that is applied to an active link. It defaults to v-link-active .

http://vuejs.github.io/vue-router/en/options.html