vue-md-to

router-link behavior on vue material elements

If you are using vue-router you probably knows that you you have the option to get rid of the hash in the url,you can use the router's history mode, which leverages the 'history.pushState' API to achieve URL navigation without a page reload. you can read more about vue-router here. But you also need to use router-link component and use 'to' or ':to" directive in order to prevent the page reloaded. for example:

<router-link :to="page.link">{{page.name}}</router-link>
or
<router-link to="/Home">Home</router-link>

So far so good, But... if you want to use vue-mateiral you don't have the 'to' directive , instead you need to use the href attr or 'v-bind:href' (or :href) directive like that:

 <md-button href="/Home">Home</md-button>
or
 <md-button:href="page.link">{{page.name}}</md-button>

So if you trying to do something like that:

<template v-for="(page,i) in pages">
  <md-button v-if="!page.children" :href="page.link">{{page.name}}</md-button>
  <md-menu v-else>
    <md-button md-menu-trigger>{{page.name}}</md-button>
    <md-menu-content>
      <md-menu-item v-for="child in page.children" :href="child.link">{{child.name}}</md-menu-item>
    </md-menu-content>
  </md-menu>
</template>

the page will reload every click:

sure ,you can hack this with something like that:

<router-link v-if="!page.children" class="md-button" :to="page.link">{{page.name}}</router-link>

But it's starting to be complicated if you want submenus and it wont work like the above example.

Instead, just use the vue-md-to directive like that :

<md-button v-md-to="page.link">{{page.name}}</md-button>
Or for submenu:
<md-menu-item v-for="child in page.children" v-md-to="child.link">{{child.name}}</md-menu-item>
Or if it just a string :
<md-button v-md-to="'/home'">Home</md-button>

So for this code:

<template v-for="(page,i) in pages">
  <md-button v-if="!page.children" v-md-to="page.link">{{page.name}}</md-button>
  <md-menu v-else>
    <md-button md-menu-trigger>{{page.name}}</md-button>
    <md-menu-content>
      <md-menu-item v-for="child in page.children" v-md-to="child.link">{{child.name}}</md-menu-item>
    </md-menu-content>
  </md-menu>
</template

Your routing will be flawless

dependencies :

vue-router vue-material