溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

nuxt中如何配置頁(yè)面路由

發(fā)布時(shí)間:2020-11-06 15:16:34 來(lái)源:億速云 閱讀:1202 作者:Leah 欄目:開(kāi)發(fā)技術(shù)

今天就跟大家聊聊有關(guān)nuxt中如何配置頁(yè)面路由,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。

去到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代碼編輯器中,在開(kāi)發(fā)之前呢,我們需要安裝一款輔助vue項(xiàng)目開(kāi)發(fā)的插件Vetur ;我們進(jìn)入編輯器,點(diǎn)擊

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

點(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) -> 用戶代碼片段 打開(kāi)后,會(huì)有一個(gè)搜索框,我們輸入vue ;編輯器會(huì)

默認(rèn)打開(kāi)一個(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è)輪播組件開(kāi)發(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 我的解決辦法與思路

一、問(wèn)題來(lái)源

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

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

nuxt中如何配置頁(yè)面路由

服務(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è)問(wèn)題都會(huì)在服務(wù)器的程序碼出錯(cuò)時(shí)出現(xiàn)

那么問(wèn)題出在后端, 排查接口

三、解決辦法

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

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

nuxt中如何配置頁(yè)面路由

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

四、總結(jié)

因?yàn)镹uxt.js是做服務(wù)端渲染的框架,頁(yè)面中只要有一個(gè)接口報(bào)錯(cuò), 服務(wù)端返回錯(cuò)誤,前端展示頁(yè)面就會(huì)出現(xiàn)崩潰;

而一個(gè)接口報(bào)錯(cuò)Nuxt只返回500錯(cuò)誤無(wú)法直接定位問(wèn)題需要逐一排查,希望Nuxt越來(lái)越強(qiáng)大吧!

看完上述內(nèi)容,你們對(duì)nuxt中如何配置頁(yè)面路由有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI