Nuxt.js validate 方法

validate 方法

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

• 類型： Function

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

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

您還可以返回一個(gè)Promise:

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

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

如果校驗(yàn)方法返回的值不為 true， Nuxt.js 將自動(dòng)加載顯示 404 錯(cuò)誤頁(yè)面。

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

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

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

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

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