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.
