分享 nuxt頁面

2021-10-06 13:01:18 字數 1346 閱讀 8253

頁面元件實際上是 vue 元件,只不過 nuxt.js 為這些元件新增了一些特殊的配置項(對應 nuxt.js 提供的功能特性)以便你能快速開發通用應用。

**vue school出品的 nuxt.js 頁面元件 的免費課程

="red"

>hello }!

<

/h1>

<

/template>

export default},

fetch (),

head (),

// and more functionality to discover..

.}<

/script>

.red

<

/style>

nuxt.js 為頁面提供的特殊配置項:

屬性名 描述

asyncdata——最重要的乙個鍵, 支援 非同步資料處理,另外該方法的第乙個引數為當前頁面元件的 上下文物件。

fetch ——與 asyncdata 方法類似,用於在渲染頁面之前獲取資料填充應用的狀態樹(store)。不同的是 fetch 方法不會設定元件的資料。詳情請參考 關於fetch方法的文件。

head——配置當前頁面的 meta 標籤, 詳情參考 頁面頭部配置api。

layout——指定當前頁面使用的布局(layouts 根目錄下的布局檔案)。詳情請參考 關於 布局 的文件。

loading——如果設定為false,則阻止頁面自動呼叫this.nux

t.

nuxt.

nuxt

.loading.finish()和this.nux

t.

nuxt.

nuxt

.loading.start(),您可以手動控制它,請看例子,僅適用於在nuxt.config.js中設定loading的情況下。請參考api配置 loading 文件。

transition——指定頁面切換的過渡動效, 詳情請參考 頁面過渡動效。

scrolltotop——布林值,預設: false。 用於判定渲染頁面前是否需要將當前頁面滾動至頂部。這個配置用於 巢狀路由的應用場景。

validate——校驗方法用於校驗 動態路由的引數。

middleware——指定頁面的中介軟體,中介軟體會在頁面渲染之前被呼叫, 請參考 路由中介軟體。

關於頁面配置項的詳細資訊,請參考 頁面 api。

——————————————————————————————————————————————

鏈結參考 :

1.2.

3.4.

5.6.

7.8.

9.10.

11.12.

nuxt頁面跳轉 nuxt路由及傳參

最近的nuxt專案中經常會用到路由傳參,故在此有所總結了下nuxt中傳參的方式和vue專案中傳參的方式 nuxt 作為ssr的nuxt專案中路由是根據pages下的檔案結構自動生成的,無需手動配置路由。很多時候專案需求,有列表頁和詳情頁。方式一 如圖 image 詳情頁命名為 id.vue 不要問我...

分享 nuxt中介軟體

中介軟體允許您定義乙個自定義函式執行在乙個頁面或一組頁面渲染之前。每乙個中介軟體應放置在 middleware 目錄。檔名的名稱將成為中介軟體名稱 middleware auth.js將成為 auth 中介軟體 乙個中介軟體接收 context 作為第乙個引數 export default func...

Nuxt使用Keep alive快取頁面

nuxt 專案中,頁面快取的問題一直是比較頭疼的一件事,幾乎都是很粗暴的告訴你使用 keep alive default.vue 頁面例項 export const state export const mutations import vue from vue import vuex from v...