[筆記] Nuxt js 初探筆記 5 – Nuxt Generate 模式下跳轉到 Error Page @地瓜大的飛翔旅程

章節連結

概念
參考連結

Nuxt js 之所以被採用作為前端框架的選項之一，很大一部分就是為了讓搜尋引擎的爬蟲能夠認得網頁。這邊筆記下當你使用 Nuxt Generate 模式生成靜態網頁時，那要如何跳轉到共同的 Error Page 模板上。

概念

1. 在 Client 端的部分，可以透過 this.$nuxt.error({ path?, statusCode?, message? }) 來跳轉到放在 layouts 頁面中的預設 error.vue
2. nuxt.config.js 中，要設置 generate: { fallback: true } ，才能在 nuxt generate 時輸出錯誤頁面
3. error.vue 中，可以透過 <component> 綁定 is 和 error，讓這個 error.vue 有因應各個不同的頁面客製化的空間

<template>
    <component :is="errorPage" :error="error" />
</template>

<script lang="ts">
import Vue from 'vue'
import LoginError from '~/components/login/Error.vue'
import DefaultError from '~/components/DefaultError.vue'

export default Vue.extend({
    name: 'NuxtError',
    props: {
        error: {
            type: Object,
            default: null
        }
    },
    computed: {
        errorPage ():string {
            let result = 'DefaultError'
            if (this.error.path) {
                switch (this.error.path) {
                case 'login':
                    result = 'LoginError'
                    break
                }
            }
            return result
        }
    }
})
</script>

</template>

import Vue from 'vue'

import LoginError from '~/components/login/Error.vue'

import DefaultError from '~/components/DefaultError.vue'

export default Vue.extend({

name: 'NuxtError',

props: {

error: {

type: Object,

default: null

}

computed: {

errorPage ():string {

let result = 'DefaultError'

if (this.error.path) {

switch (this.error.path) {

case 'login':

result = 'LoginError'

break

}

return result

}

})

</script>

參考連結

1. Custom Error Pages with nuxt.js
2. [Nuxt Vue] Error status跳404頁面

按讚加入粉絲團

概念

參考連結

延伸閱讀