Vue-material: router-link with "md-button" tag not work

[despird-zh]

vue-material version: 0.7.1

Reproduce it:
step1: following is a workable link.
<router-link to="/components/button" class="md-raised md-primary">Router Link</router-link>

step2: add tag="md-button" it won't work, but in [email protected] it works fine.
<router-link tag="md-button" to="/components/button" class="md-raised md-primary">Router Link</router-link>

PS. thanks to marcos, great work done!

[d3radicated]

Also, click events don't work on "md-button". It can be fixed by using the native click event (@click.native="fn").

[ralphchristianeclipse]

yes same with me using
js <router-link tag="md-button" :to="{name: 'path'}">Doesnt Work</router-link>

[marcosmoura]

I will take a look. Right now, as a workaround, you can use:

<router-link tag="button" :to="/" class="md-button">Hello! <md-ink-ripple /></router-link>

[d3radicated]

According to Vue Router's documentation, the navigation triggers on the click event. Since it's been deprecated on the md-button component, it doesn't trigger anymore.

[d3radicated]

Temporary Workaround

<md-button @click.native="$router.push('/components/button')>Router Link</md-button>"

[marcosmoura]

It's fixed on develop branch and will be delivered soon.
It's important to notice that is not possible to use md-button as tag and expect <a> as output.
The best workaround for this (but still odd):

<router-link to="/" class="md-button" :class="`md-theme-${$material.currentTheme}`">Hello! <md-ink-ripple /></router-link>

In this case the output will be:

<a href="#/" class="md-button md-theme-default"> ... </a>

[ikbelkirasan]

I fixed it like this:
<md-menu class="pull-right" md-align-trigger md-direction="bottom left"> <md-button md-menu-trigger><md-icon>account_circle</md-icon> Kira San</md-button> <md-menu-content> <md-list> <md-list-item> <router-link exact to="/profile"><span>Profile</span></router-link> </md-list-item> </md-list> </md-menu-content> </md-menu>