nuxt中如何配置頁面路由

發布時間：2020-11-06 15:16:34

來源：億速云

閱讀：248

作者：Leah

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

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

好，我們進入命令行，來創建頁面文件，

1、windows 系統下可以使用如下命令：for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v

2、linux/mac 系統下可以使用如下命令：touch index.vue jokes.vue about.vue

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

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

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

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

默認打開一個vue.json，我們使用下面的內容覆蓋：

{

"Print to console": {

"prefix": "vue",

"body": [

"",

"

$0",

"",

"",

"

"export default {",

"data(){",

" return {} ",

"}",

"",

"}",

"",

"",

"

""

],

"description": "Log output to console"

}

}

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

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

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

首頁輪播組件開發

首先，我們給 index.vue 里面的包裹class命名

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

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

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

fade ，輪播過渡效果，

indicators, 左右切換按鈕

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

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

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

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

:caption="it.caption"

:text="it.text"

:img-src="it.img"

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

v-bind:key="index"

>

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

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

一、問題來源

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

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

服務器錯誤日志如下：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狀態碼：服務器內部錯誤，無法完成請求。

一般來說，這個問題都會在服務器的程序碼出錯時出現

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

三、解決辦法

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

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

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

四、總結

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

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

看完上述內容，你們對nuxt中如何配置頁面路由有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。