亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2020年05月11日 08:38:08   作者：Piconjo_Official  
這篇文章主要介紹了Nuxt默認(rèn)模板、默認(rèn)布局和自定義錯(cuò)誤頁面的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)類似 可將{{HEAD}}視為頭部?jī)?nèi)容 將{{APP}}視為頁面主體內(nèi)容
(HEAD和APP都需大寫)

<!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è)頁面
在layouts/default.vue里設(shè)置默認(rèn)布局：

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

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

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

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

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

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

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

相關(guān)文章

最新評(píng)論