Linux路由界面设置,nuxt中如何配置页面路由

本文详细介绍了在Nuxt项目中配置页面路由的步骤,包括创建路由对应的.vue文件、设置Vetur插件、实现页面跳转及轮播组件示例。还分享了遇到500错误的排查思路,重点讲解了如何定位并修复接口问题。

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)报错如下:

ccf98e233fc6eeda6ddee51dc6d937a3.png

服务器错误日志如下: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):

d6ddc35dfed83074962914ba302b97a6.png

逐一注释代码是比较笨拙的方法, 如果可以, 直接看控制台的Network查看出错的接口;

四、总结

因为Nuxt.js是做服务端渲染的框架,页面中只要有一个接口报错, 服务端返回错误,前端展示页面就会出现崩溃;

而一个接口报错Nuxt只返回500错误无法直接定位问题需要逐一排查,希望Nuxt越来越强大吧!

看完上述内容,你们对nuxt中如何配置页面路由有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值