iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
1
Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列 第 20

20. Nuxt `<nuxt-link>` 有什麼特別

  • 分享至 

  • xImage
  •  

根據 文件 所寫

就目前而言 <nuxt-link><router-link> 一樣

點擊功能太常用,身為工程師還是看個仔細實際上他有無多做工,不然多了 Bug 難找起

這是 lib 內的 <nuxt-link> 定義

export default {
  name: 'nuxt-link',
  functional: true,
  render (h, { data, children }) {
    return h('router-link', data, children)
  }
}

看起來的確只是配合 Nuxt 改個皮,加點料 functional,代表他是內建 component

難怪文件直接叫你去看 Vue Router 使用 <router-link> 片段

一般使用於頁面元件時,除了名字寫法一致

<template>
  <div>
    <h1>Home page</h1>
    <nuxt-link to="/about">About</nuxt-link>
  </div>
</template>

既然一致,便好奇「能不能如同 Vue 1.x 升 2.0 的檢查工具 vue-migraiton-tool,檢查原 SPA Vue Router 的路由定義與元件是否符合 Nuxt 慣例」、有可能寫個轉換工具,畢竟 Nuxt 也有 SPA Mode。

另外官方文件也埋了伏筆

In the future, we will add features to the <nuxt-link> component, like pre-fetching on the background for improving the responsiveness of Nuxt.js Applications.

未來 Nuxt 可能會針對 <nuxt-link> 的宣告頁面做快取優化,或是預載 <nuxt-link> 目標頁面。
這就可能用到 async component 機制

並提出疑問

Nuxt 從 Universal 改編譯為 SPA 時,是否單純把 Component 一次打包,還是有自個的非同步載入機制?

在深入運作機制時搞懂,搞不好能貢獻這項優化


上一篇
19. Nuxt Middleware,請求與回應間的中盤商
下一篇
21. Nuxt 處理首屏 - `<no-ssr>`
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言