在上一個章節(jié)內(nèi)容中，我們開發(fā)了AppHeader公共頂部菜單導(dǎo)航欄組件，本章節(jié)呢，我們根據(jù)菜單導(dǎo)航的路由導(dǎo)航，來配置我們的 page頁面，

去到pages目錄，我們需要創(chuàng)建3個[nuxt_link_name].vue頁面文件，用來匹配路由導(dǎo)航需要加載的頁面；

好，我們進入命令行，來創(chuàng)建頁面文件，

1、windows 系統(tǒng)下可以使用如下命令：

for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v

2、linux/mac 系統(tǒng)下可以使用如下命令：

touch index.vue jokes.vue about.vue

好的，我們接下來，把項目拖拽到vs code代碼編輯器中，在開發(fā)之前呢，我們需要安裝一款輔助vue項目開發(fā)的插件Vetur ；我們進入編輯器，點擊

左側(cè)菜單的擴展按鈕，或者使用快捷鍵ctrl + shift + x ，然后左側(cè)就會出現(xiàn)擴展應(yīng)用商店列表，我們在上面的搜索框中，輸入Vetur 回車查找，

點擊第一個查詢結(jié)果點擊，右側(cè)就會出現(xiàn)Vetur的詳情簡介，我們可以點擊上面安裝按鈕，進行安裝；我們需要這個插件，對我們的.vue文件語法高亮；

接下來，我們來設(shè)置下，快速生成vue基本的文件結(jié)構(gòu)，我們在文件 -> 首選項 -> 用戶代碼片段 打開后，會有一個搜索框，我們輸入vue ；編輯器會

默認(rèn)打開一個vue.json，我們使用下面的內(nèi)容覆蓋：

{
 "Print to console": {
  "prefix": "vue",
  "body": [
   "<template>",
   " <div>$0</div>",
   "</template>",
   "",
   "<script>",
   "export default {",
    "data(){",
     " return {} ",
    "}",
   "",
   "}",
   "",
   "</script>",
   "<style scoped>",
   "</style>"
  ],
  "description": "Log output to console"
 }
}

接下來，我們新建一個空白的.vue文件，或者在一個空白的.vue文件中，輸入vue ,按下 tab鍵，就會自動生成上面的vue模板結(jié)構(gòu)；

我們分別在 index.vue、jokes.vue、about.vue 中引入對應(yīng)的Index Page 、Jokes Page 、About Page 三個字段來區(qū)分三個不同的頁面組件，

再接著我們可以嘗試點擊菜單導(dǎo)航欄的導(dǎo)航鏈接，查看是否發(fā)生頁面切換，以及觀察路由名稱和page組件的命令的匹配規(guī)則；

首頁輪播組件開發(fā)

首先，我們給 index.vue 里面的包裹class命名 <div class="content-page"> , css 樣式編寫如下：

.content-page { margin: 0; width:100%; }

bootstrapVue 里面有一個輪播組件標(biāo)簽<b-carousel> ，它有一些比較重要的屬性（props），首先我們給他一個

:interval="3000"，這里的意思是3000毫秒輪播一次，

fade ，輪播過渡效果，

indicators, 左右切換按鈕

img-width="1024"，圖片的寬度

img-height="480"，圖片的高度

background="#ababab" 設(shè)置輪播組件的背景顏色

好，我們來看一下效果；這個標(biāo)簽里面呢，有一個輪播組件標(biāo)簽 <b-carousel-slide> ，它承載著我們的輪播圖片和文字信息，它的詳細(xì)配置如下：

<b-carousel-slide
 :caption="it.caption"
 :text="it.text"
 :img-src="it.img"
 v-for="(it,index) in sliders"
 v-bind:key="index"
 ></b-carousel-slide>

caption 的意思就是 大標(biāo)題 ，text 就是介紹文字，img 就是 封面輪播圖片

補充知識：NuxtServerError:Request failed with status code 500 我的解決辦法與思路

一、問題來源

平時使用nuxt和部署上線都是正常運行的,偶爾有一天報500的錯誤;

Nuxt.js運行(npm run dev)報錯如下：

服務(wù)器錯誤日志如下：

0|qiu | ERROR Request failed with status code 500 20:17:14

0|qiu | at createError (node_modules/axios/lib/core/createError.js:16:15)

0|qiu | at settle (node_modules/axios/lib/core/settle.js:18:12)

0|qiu | at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:201:11)

0|qiu | at IncomingMessage.emit (events.js:187:15)

0|qiu | at IncomingMessage.EventEmitter.emit (domain.js:441:20)

0|qiu | at endReadableNT (_stream_readable.js:1094:12)

0|qiu | at process._tickCallback (internal/process/next_tick.js:63:19)

二、解決思路

500狀態(tài)碼：服務(wù)器內(nèi)部錯誤，無法完成請求。

一般來說，這個問題都會在服務(wù)器的程序碼出錯時出現(xiàn)

那么問題出在后端, 排查接口

三、解決辦法

逐一注釋代碼,發(fā)現(xiàn)了頁面中有一個接口報錯,讓后端修正后問題即得到解決了;

請求接口報錯如下(后臺是php):

逐一注釋代碼是比較笨拙的方法, 如果可以, 直接看控制臺的Network查看出錯的接口;

四、總結(jié)

因為Nuxt.js是做服務(wù)端渲染的框架，頁面中只要有一個接口報錯, 服務(wù)端返回錯誤，前端展示頁面就會出現(xiàn)崩潰;

而一個接口報錯Nuxt只返回500錯誤無法直接定位問題需要逐一排查，希望Nuxt越來越強大吧！

以上這篇nuxt 頁面路由配置,主頁輪播組件開發(fā)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論