Vue-material: [Question] Using vue-router definition in <md-list-item>

[rslhdyt]

I have installed this awesome vue-material in my vuejs project, also I use vue-router to manage app routing. In component list I want use <router-link> as <md-list-item> instead of using url properties in <md-list-item url="URL">.

this is posible and how can I implement it?

[fusion44]

To my knowledge it is not possible at the moment. As a workaround I use Javascript routing like this:

<md-button @click="onSignIn">Sign In</md-button>

methods: {
  onSignIn() {
    this.$router.push({name: 'login'}); 
  }
}

[mmajcenic]

@rslhdyt I am not sure if I understood from your question, but is it something like this you need?

        <md-list-item>
          <router-link exact to="/changelog">
            <md-icon class="md-primary">person</md-icon>
            <span>My Profile</span>
          </router-link>
        </md-list-item>

[marcosmoura]

The @Sarpedion solution is the way to achieve that. The Vue Material documentation use this approach.

Thanks!

[rslhdyt]

@Sarpedion actualy I've tried like your example. but more simply

<md-list-item> <router-link exact to="/changelog">My Profile</router-link> </md-list-item>
but unfortunately it is not working.

I'll use @fusion44 solutions, because I need a callback after page is reloaded.

Thank You All

[marcosmoura]

The @fusion44 method works, but dont let users to open the link in another tab.
I'm using this in the documentation Website:

<md-list-item>
  <router-link exact to="/">Introduction</router-link>
</md-list-item>

[rslhdyt]

The @fusion44 method works, but dont let users to open the link in another tab.

Noted! @marcosmoura