快捷導(dǎo)航

nuxt 頁(yè)面路由配置,主頁(yè)輪播組件開發(fā)操作

更新時(shí)間：2020年11月05日 11:30:53 作者：我的小英短

這篇文章主要介紹了nuxt 頁(yè)面路由配置,主頁(yè)輪播組件開發(fā)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

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

好，我們進(jìn)入命令行，來(lái)創(chuàng)建頁(yè)面文件，

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

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

左側(cè)菜單的擴(kuò)展按鈕，或者使用快捷鍵ctrl + shift + x ，然后左側(cè)就會(huì)出現(xiàn)擴(kuò)展應(yīng)用商店列表，我們?cè)谏厦娴乃阉骺蛑?，輸入Vetur 回車查找，

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

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

默認(rèn)打開一個(gè)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"
 }
}

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

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

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

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

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

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

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

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

fade ，輪播過(guò)渡效果，

indicators, 左右切換按鈕

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

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

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

好，我們來(lái)看一下效果；這個(gè)標(biāo)簽里面呢，有一個(gè)輪播組件標(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 就是封面輪播圖片

補(bǔ)充知識(shí)：NuxtServerError:Request failed with status code 500 我的解決辦法與思路

一、問題來(lái)源

平時(shí)使用nuxt和部署上線都是正常運(yùn)行的,偶爾有一天報(bào)500的錯(cuò)誤;

Nuxt.js運(yùn)行(npm run dev)報(bào)錯(cuò)如下：

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

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)部錯(cuò)誤，無(wú)法完成請(qǐng)求。

一般來(lái)說(shuō)，這個(gè)問題都會(huì)在服務(wù)器的程序碼出錯(cuò)時(shí)出現(xiàn)

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

三、解決辦法

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

請(qǐng)求接口報(bào)錯(cuò)如下(后臺(tái)是php):