Linking

The g-link component is available globally in all your templates. It's a wrapper for router-link from Vue Router.

g-link uses Intersection Observer to prefetch linked pages when link is in view. This makes browsing around in Gridsome very fast because the clicked page is already downloaded.

How to use

To link to ~/src/pages/About.vue use <g-link to="/about" />.

To link to external links you need to use the normal <a href="https://url"> tag.

To link to #anchor links you need to use the normal <a href="#anchor"> tag.

Options

<!-- Link with string path -->
<g-link to="/about">About us</g-link>

<!-- Link to a named route -->
<g-link :to="{ name: 'about' }">About us</g-link>

<!-- Link with variable path -->
<g-link :to="node.path">Read more</g-link>
Property Default Description
to required Guide →
exact Guide →
active-class active Guide →
exact-active-class active--exact Guide →

Edit this page on GitHub