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

Nuxt默認(rèn)模板、默認(rèn)布局和自定義錯(cuò)誤頁(yè)面的實(shí)現(xiàn)

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

一、默認(rèn)模板和默認(rèn)布局

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

默認(rèn)模板

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

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

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

重啟服務(wù)器 即可顯示效果
同樣 刪除默認(rèn)模板也需要重啟服務(wù)器才可生效

默認(rèn)布局

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

<template>
 <div>
  <p>測(cè)試1</p>
  <nuxt />
  <p>測(cè)試2</p>
 </div>
</template>

二、自定義錯(cuò)誤頁(yè)面

在layouts/error.vue里定義錯(cuò)誤頁(yè)面：

當(dāng)進(jìn)入錯(cuò)誤頁(yè)面默認(rèn)會(huì)傳入一個(gè)error對(duì)象 用props接收 用v-if和v-else進(jìn)行狀態(tài)碼的判斷

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

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

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

相關(guān)文章

最新評(píng)論