欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Nuxt默認模板、默認布局和自定義錯誤頁面的實現(xiàn)

 更新時間：2020年05月11日 08:38:08   作者：Piconjo_Official  
這篇文章主要介紹了Nuxt默認模板、默認布局和自定義錯誤頁面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、默認模板和默認布局

通常用于一些有固定格式的網(wǎng)站 比如一些網(wǎng)站的頭部和底部都是一樣的 此時即可使用默認模板

默認模板

在項目的根目錄下創(chuàng)建一個名為app.html的文件 Nuxt即可自動將其識別為默認模板：

用法和字符串拼接有點類似 可將{{HEAD}}視為頭部內(nèi)容 將{{APP}}視為頁面主體內(nèi)容
(HEAD和APP都需大寫)

<!DOCTYPE html>
<html lang="en">
<head>
  {{HEAD}}
</head>
<body>
  <p>測試1</p>
  {{APP}}
  <p>測試2</p>
</body>
</html>

重啟服務器 即可顯示效果
同樣 刪除默認模板也需要重啟服務器才可生效

默認布局

默認布局和默認模板的區(qū)別是 默認布局只能修改<template>標簽內(nèi)的布局 而默認模板能修改整個頁面
在layouts/default.vue里設置默認布局：

<template>
 <div>
  <p>測試1</p>
  <nuxt />
  <p>測試2</p>
 </div>
</template>

二、自定義錯誤頁面

在layouts/error.vue里定義錯誤頁面：

當進入錯誤頁面默認會傳入一個error對象 用props接收 用v-if和v-else進行狀態(tài)碼的判斷

<template>
 <div>
  <h1 v-if="error.statusCode === 404">頁面不存在</h1>
  <h1 v-else>頁面發(fā)生了一個錯誤</h1>
  
  <nuxt-link to="/">返回首頁</nuxt-link>
 </div>
</template>

<script>
export default {
 props: ["error"],
 layout: "blog" // 可以為錯誤頁面指定自定義的布局
}
</script>

到此這篇關于Nuxt默認模板、默認布局和自定義錯誤頁面的文章就介紹到這了,更多相關Nuxt默認模板、默認布局和自定義錯誤頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論