Nuxt.js validate 方法

validate 方法

Nuxt.js 可以讓你在動態(tài)路由對應(yīng)的頁面組件中配置一個校驗方法用于校驗動態(tài)路由參數(shù)的有效性。

• 類型： Function

validate({ params, query }) {
  return true // 如果參數(shù)有效
  return false // 參數(shù)無效，Nuxt.js 停止渲染當(dāng)前頁面并顯示錯誤頁面
}

async validate({ params, query, store }) {
  // await operations
  return true // 如果參數(shù)有效
  return false // 將停止Nuxt.js呈現(xiàn)頁面并顯示錯誤頁面
}

您還可以返回一個Promise:

validate({ params, query, store }) {
  return new Promise((resolve) => setTimeout(() => resolve()))
}

Nuxt.js 可以讓你在動態(tài)路由對應(yīng)的頁面組件（本例為： pages/users/_id.vue）中配置一個校驗方法。

如果校驗方法返回的值不為 true， Nuxt.js 將自動加載顯示 404 錯誤頁面。

export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

你也可以在validate 方法中校驗 store 的數(shù)據(jù) (如果 store 此前在 nuxtServerInit 方法 中被設(shè)置了的話):

export default {
  validate ({ params, store }) {
    // 校驗 `params.id` 是否存在
    return store.state.categories.some(category => category.id === params.id)
  }
}

您還可以在驗證函數(shù)執(zhí)行期間拋出預(yù)期或意外錯誤：

export default {
  async validate ({ params, store }) {
    // 使用自定義消息觸發(fā)內(nèi)部服務(wù)器500錯誤
    throw new Error('Under Construction!')
  }
}