The `router-link` Component in Vue
The router-link
component
creates an <a>
tag that's configured to work correctly with
Vue router. For example, given the
below Vue code:
const router = new VueRouter({
routes: [
{ path: '/home', component: { template: '<h1>Home</h1>' } },
{ path: '/about', component: { template: '<h1>About Us</h1>' } }
]
});
const app = new Vue({
router,
template: `
<div id="rendered-content">
<div>
<router-link to="/home">Home</router-link>
<router-link to="/about">About Us</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
`
}).$mount('#content');
Vue will render the below HTML. Note that <router-link>
becomes
a plain-old <a>
tag.
<div>
<a href="#/home" class="">Home</a>
<a href="#/about" class="">About Us</a>
</div>
<div><!----></div>
With the above example, you can write your own <a>
tags instead
of going through <router-link>
, but then you would need to
do extra work to support named routes and HTML5 mode.
Custom Tags
The router-link
component supports a neat tag
prop
that lets you specify a custom tag to use for navigation, as
opposed to the default <a>
. For example, here's how you
can use buttons for navigation instead of <a>
tags:
const app = new Vue({
router,
template: `
<div id="rendered-content">
<div>
<router-link to="/home" tag="button">Home</router-link>
<router-link to="/about" tag="button">About Us</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
`
}).$mount('#content');
Vue would render the below HTML:
<div>
<button class="">Home</button>
<button class="">About Us</button>
</div>
<div><!----></div>
Looks like the buttons don't do anything, but Vue Router registered event handlers to make clicking on the buttons trigger navigation as shown below.