Work with Vue Router

Vue Material Router Link Components

So far the md-tab, md-list-item, md-bottom-bar-item and md-step components support Vue router.

These Vue Material components will be auto-generated with the to prop and accept all router-link props except tag.

Work with Router option linkActiveClass

Since Vue Router doesn't expose isSameRoute and isIncludedRoute methods, Vue Material cannot detect which links are active. Vue Material injects linkActiveClass as an extra active class, enabling interaction with Vue router. Therefore, if you want to use a custom class for an active link by default, you need to setup like this:

const linkActiveClass = 'my-link-active-class'

// pass custom class to Vue Material
Vue.material.router.linkActiveClass = linkActiveClass

// pass custom class to Vue Router
router = new VueRouter({
  routes,
  linkActiveClass
})

const app = new Vue({
  name: 'Root',
  router,
})