這篇是頁面客製段落其二，主題講「Nuxt 頁面讀取效果如何調整」

用來補充頁面細部設定

讓我們回想錯誤頁面，是用來「呈現錯誤狀態的頁面元件」

而頁面渲染前，Nuxt 先自動套用一個暫時的「頁面元件」，讓暫態過度看起來自然、平順

做法同錯誤頁面，按

• 正在讀取中 => 讀取效果 (Loading)
• 頁面切換中 => 轉場效果 (Transition)

Nuxt 已為這兩個狀態留了元件掛載點

讀取效果 (Loading)

Nuxt 讀取效果是全域設定，預設是個進度條 (Progress Bar) 效果，放在 lib/components/nuxt-loading.vue

官網文件切換時的效果稍微改了顏色，讀者自行點點看

nuxt.config.js 預設參數是

loading: {
    color: 'black',
    failedColor: 'red',
    height: '2px',
    duration: 5000,
    rtl: false
},

有三種程度的客製:

1. 針對原進度條元件調整

| KEY | 型別 | 預設值 | 描述 |
|------------------------------------------|
| color |String |'black' |正常進度條顏色|
|failedColor| String |'red'| 錯誤時的進度條顏色|
| height | String | '2px' | 進度條粗細 |
| throttle | Number | 200 | 呈現效果前的緩衝時間，單位毫秒(ms) |
| duration | Number | 5000 | 呈現效果的最長時間，單位毫秒(ms) |
| rtl | Boolean | false | 進度條方向，false 從左到右，true 反之 |

單純調整參數而已，簡單

2. 直接換成客製的讀取效果

新增並更改 nuxt.config.js 讀取效果對應的頁面元件

loading: `~/components/loading.vue`,

3. 手動控制各頁面的效果觸發時機

想要控制登入頁的讀取效果，得先關掉預設觸發

/pages/login.vue

<script>
	export default {
        /* ... */
        loading: false
	}
</script>

然後手動呼叫讀取效果觸發 API

• $nuxt.$loading.start(): 顯示進度條
• $nuxt.$loading.end(): 結束進度條

根據網站設計稿或 User Story 觸發時機調整

可參考案例
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-page-loading?from-embed