點燈坊

失くすものさえない今が強くなるチャンスよ

使用 g-link 支援 Smart Link Prefetching

Sam Xiao's Avatar 2021-08-22

Gridsome 特別提供 <g-link> 支援 Smart Link Prefetching 增進效率，讓相關 Page 在背後事先下載。

Version

Gridsome 0.7.23

g-link002

Gridsome 的 Home 與 About 就是使用 g-link 產生。

src/layouts/Default.vue

<template>
  <div class="layout">
    <header class="header">
      <strong>
        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
      </strong>
      <nav class="nav">
        <g-link class="nav__link" to="/">Home</g-link>
        <g-link class="nav__link" to="/about/">About</g-link>
      </nav>
    </header>
    <slot/>
  </div>
</template>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style>
body {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0;
  padding:0;
  line-height: 1.5;
}

.layout {
  max-width: 760px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  height: 80px;
}

.nav__link {
  margin-left: 20px;
}
</style>

第 8 行

<g-link class="nav__link" to="/">Home</g-link>

在 Default layout 中，我們會看到 <g-link>，這是 Gridsome 所提供的 global component，其 to property 可指定其他 page 的 route，亦可搭配 property binding 將 to 綁定到 data。

<g-link> 與 <a> 不同的是支援 smart link prefetching，會事先將 url 內容下載下來，當 user 實際點擊時，由於 HTML / CSS / JavaScript 早已下載，執行速度會非常快。

第 9 行

<g-link class="nav__link" to="/about/">About</g-link>

由於每個 page 最後都是 index.html，因此 Gridsome 綁定 to 的 route 結尾要加上 /。

Conclusion

  • Gridsome 內部 url 可使用 g-link 可獲得 smart link prefetching 增進效率；外部 url 或 anchor 則繼續使用 HTML 的 a

Reference

Reed Barger, G-Links, Smart Link Prefetching
Gridsome, Linking

# Gridsome