nuxt中如何配置頁面路由

發(fā)布時(shí)間：2020-11-06 15:16:34

來源：億速云

閱讀：248

作者：Leah

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

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

好，我們進(jìn)入命令行，來創(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

好的，我們接下來，把項(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è)谏厦娴乃阉骺蛑?#xff0c;輸入Vetur 回車查找，

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

接下來，我們來設(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": [

"",

"

$0",

"",

"",

"

"export default {",

"data(){",

" return {} ",

"}",

"",

"}",

"",

"",

"

""

],

"description": "Log output to console"

}

}

接下來，我們新建一個(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è)字段來區(qū)分三個(gè)不同的頁面組件，

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

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

首先，我們給 index.vue 里面的包裹c(diǎn)lass命名

, css 樣式編寫如下：.content-page { margin: 0; width:100%; }

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

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

fade ，輪播過渡效果，

indicators, 左右切換按鈕

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

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

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

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

:caption="it.caption"

:text="it.text"

:img-src="it.img"

v-for="(it,index) in sliders"

v-bind:key="index"

>

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

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

一、問題來源

平時(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ò)誤，無法完成請(qǐng)求。

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

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

三、解決辦法

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

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

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

四、總結(jié)

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

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

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

總結(jié)

以上是生活随笔為你收集整理的Linux路由界面设置,nuxt中如何配置页面路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。