withRouter: {

title: 'Work with Vue Router'

},

<md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>

<md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>

<div class="phone-viewport">

<md-bottom-bar class="md-accent" md-sync-route>

<md-bottom-bar-item to="/components/bottom-bar/posts/1" md-label="Post 1" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>

<md-bottom-bar-item to="/components/bottom-bar/posts/2" md-label="Post 2" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>

</md-bottom-bar>

</div>

<md-list-item to="/components/list" exact>Router <code>/</code></md-list-item>

<md-list-item to="/components/list/router">Router <code>/router/**</code></md-list-item>

</md-list>

<md-list>

<md-list-item to="/components/list/router/1">Router <code>/router/1</code></md-list-item>

<md-list-item to="/components/list/router/2">Router <code>/router/2</code></md-list-item>

<md-step id="first" to="/components/steppers" exact md-label="First Step">

<md-list>

<md-list-item to="/components/steppers/second/sub1">Subpage 1</md-list-item>

<md-list-item to="/components/steppers/second/sub2">Subpage 2</md-list-item>

</md-list>

<md-list>

<md-list-item to="/components/steppers/second/sub1">Subpage 2-1</md-list-item>

<md-list-item to="/components/steppers/second/sub2">Subpage 2-2</md-list-item>

</md-list>

<md-tab id="tab-home" md-label="Home" to="/components/tabs" exact>

<md-tab id="tab-home" md-label="Home" to="/components/tabs" exact></md-tab>

<md-tab id="tab-pages" md-label="Pages" to="/components/tabs/pages">

<md-list>

<md-list-item to="/components/tabs/pages/1">Go to Subpage 1</md-list-item>

<md-list-item to="/components/tabs/pages/2">Go to Subpage 2</md-list-item>

</md-list>

</md-tab>

<md-tab id="tab-favorites" md-label="Favorites" to="/components/tabs/favorites"></md-tab>

<h2>Mirror Subpage</h2>

<md-tabs md-sync-route>

<md-tab id="tab-pages-1" md-label="Pages 1" to="/components/tabs/pages/1">Subpage 1</md-tab>

<md-tab id="tab-pages-2" md-label="Pages 2" to="/components/tabs/pages/2">Subpage 2</md-tab>

</md-tabs>

<style lang="scss" scoped>

</style>

<template>

<page-container centered :title="$t('pages.withRouter.title')">

<div class="page-container-section">

<h2 class="md-headline">Vue Material Router Link Components</h2>

<p>Vue router supported with <code><router-link to="/components/tabs">md-tab</router-link></code>, <code><router-link to="/components/list">md-list-item</router-link></code>, <code><router-link to="/components/bottom-bar">md-bottom-bar-item</router-link></code> and <code><router-link to="/components/steppers">md-step</router-link></code> so far.</p>

<p>Vue Material router link components will be auto-generated with the prop <code>to</code>. All <a href="https://router.vuejs.org/en/api/router-link.html"><code>router-link</code> props</a> except <code>tag</code> accepted.</p>

<h2 class="md-headline">Work with Router option <code>linkActiveClass</code></h2>

<p>Since Vue Router doesn't expose <code>isSameRoute</code> and <code>isIncludedRoute</code> methods, Vue Material cannot detect which links are active. Vue Material inject <code>linkActiveClass</code> with an extra active class to interact with router. Therefore, if you want to using an custom class for active link as default, you need to setup like this:</p>

<code-example title="Individual components">

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,

})

</code-example>

</div>

</page-container>

</template>

<script>

</script>

path: '/components/steppers/:optional?/:sub?',

path: '/components/tabs/:optional?/:sub?',

path: '/components/bottom-bar/:optional?/:sub?',

path: '/components/list/:optional?/:sub?',

{

path: '/with-router',

name: 'with-router',

page: 'WithRouter.vue'

},

mappedRoutes.push(route.path.replace('/:optional?/:sub?', ''))

<router-link to="/with-router">{{ $t('pages.withRouter.title') }}</router-link>