<g-link> component is available globally in all your Pages, Templates & Components. It's a wrapper for router-link from Vue Router.
How it works
<g-link> uses IntersectionObserver to prefetch linked pages when link is in view. This makes browsing around in a Gridsome site very fast because the clicked page is already downloaded.
How to use
Link between pages
The following example links to the
<g-link to="/about/">About us</g-link>
Always add a trailing slash when linking to other internal pages. Because the HTML file for the page is a
index.html file in a directory. Paths generated for nodes already include a trailing slash.
You do not need to include the
pathPrefix option in the
Link to external pages
To link to external links you need to use the normal tag:
Link to #anchor links
To link to #anchor links you need to use the normal
<a href="#anchor"> tag.
<!-- Link with string path --> <g-link to="/about/">About us</g-link> <!-- Link with variable path --> <g-link :to="node.path">Read more</g-link>