Skip to content

Commit fdef98a

Browse files
authored
update the work with Vue router page grammar
1 parent ff6d041 commit fdef98a

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

docs/app/pages/WithRouter.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<page-container centered :title="$t('pages.withRouter.title')">
33
<div class="page-container-section">
44
<h2 class="md-headline">Vue Material Router Link Components</h2>
5-
<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>
6-
<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>
5+
<p>So far the <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> components support Vue router.</p>
6+
<p>These Vue Material components will be auto-generated with the <code>to</code> prop and accept all <a href="https://router.vuejs.org/en/api/router-link.html">router-link props</a> except <code>tag</code>.</p>
77
<h2 class="md-headline">Work with Router option <code>linkActiveClass</code></h2>
8-
<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>
8+
<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 injects <code>linkActiveClass</code> 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:</p>
99
<code-example title="Individual components">
1010
const linkActiveClass = 'my-link-active-class'
1111

0 commit comments

Comments
 (0)