溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是Nuxt如何實現默認模板、默認布局和自定義錯誤頁面，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
一、默認模板和默認布局
通常用于一些有固定格式的網站 比如一些網站的頭部和底部都是一樣的 此時即可使用默認模板
默認模板
在項目的根目錄下創建一個名為app.html的文件 Nuxt即可自動將其識別為默認模板：
用法和字符串拼接有點類似 可將{{HEAD}}視為頭部內容 將{{APP}}視為頁面主體內容
(HEAD和APP都需大寫)
<!DOCTYPE html>
<html lang="en">
<head>
{{HEAD}}
</head>
<body>
<p>測試1</p>
{{APP}}
<p>測試2</p>
</body>
</html>重啟服務器 即可顯示效果
同樣 刪除默認模板也需要重啟服務器才可生效
默認布局
默認布局和默認模板的區別是 默認布局只能修改<template>標簽內的布局 而默認模板能修改整個頁面
在layouts/default.vue里設置默認布局：
<template> <div> <p>測試1</p> <nuxt /> <p>測試2</p> </div> </template>
二、自定義錯誤頁面
在layouts/error.vue里定義錯誤頁面：
當進入錯誤頁面默認會傳入一個error對象 用props接收 用v-if和v-else進行狀態碼的判斷
<template>
<div>
<h2 v-if="error.statusCode === 404">頁面不存在</h2>
<h2 v-else>頁面發生了一個錯誤</h2>
<nuxt-link to="/">返回首頁</nuxt-link>
</div>
</template>
<script>
export default {
props: ["error"],
layout: "blog" // 可以為錯誤頁面指定自定義的布局
}
</script>看完這篇關于Nuxt如何實現默認模板、默認布局和自定義錯誤頁面的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
