NuxtJS專案 非同步資料

2022-05-02 16:36:10 字數 962 閱讀 5534

nuxt.js 擴充套件了 vue.js,增加了乙個叫asyncdata的方法,使得我們可以在設定元件的資料之前能非同步獲取或處理資料。asyncdata方法會在元件(限於頁面元件)每次載入之前被呼叫。它可以在服務端或路由更新之前被呼叫。 在這個方法被呼叫的時候,第乙個引數被設定為當前頁面的上下文物件,我們可以利用asyncdata方法來獲取資料,nuxt.js 會將asyncdata返回的資料融合元件data方法返回的資料一併返回給當前元件。

(1)asyncdata的實現方式

使用asyncdata方法的方式有下面幾種,可以根據自己的喜好來選擇:

返回乙個promise, nuxt.js會等待該promise被解析之後才會設定元件的資料,從而渲染元件。

(2)asyncdata還可以訪問動態路由的資料,我們可以使用注入asyncdata屬性的context物件來訪問動態路由資料。

(3)query引數的監聽

預設情況下,query的改變不會呼叫asyncdata方法。如果要監聽這個行為,例如,在構建分頁元件時,您可以設定應通過頁面元件的watchquery屬性監聽引數。

(4)錯誤提示

nuxt.js 在上下文物件context中提供了乙個error(params)方法,你可以通過呼叫該方法來顯示錯誤資訊頁面。params.statuscode可用於指定服務端返回的請求狀態碼。

如果我們使用了**函式的方式, 可以將錯誤的資訊物件直接傳給該**函式, nuxt.js 內部會自動呼叫error方法。

Docker部署前端nuxtjs專案

1 拉取node映象,命令 docker pull node 附docker常用命令 檢視映象列表 docker images 檢視執行中的容器 docker ps 檢視所有容器 docker ps a 停止容器 docker stop cid 容器id或名稱 重啟容器 docker restart...

nuxtjs專案部署Ubuntu伺服器

由於為了達到更好的seo效果,最近研究了下nuxt.js 來做服務端渲染 ssr 本文來講講,在本地開發完成後怎麼在伺服器上配合nginx部署node專案。本地打包 上傳到伺服器 安裝伺服器環境 安裝專案依賴和測試啟動 pm2 守護啟動 nginx配置 本地打包 打包前,先設定好在伺服器中要開啟的埠...

服務端渲染 手動部署 NuxtJs 專案

nuxt.js 提供了一系列常用的命令,用於開發或發布部署。命令描述 nuxt 啟動乙個熱載入的 web 伺服器 開發模式 localhost 3000 nuxt build 利用 webpack 編譯應用,壓縮 js 和 css 資源 發布用 nuxt start 以生產模式啟動乙個 web 伺服...