nuxt 页面路由配置,主页轮播组件开发操作


Posted in Javascript onNovember 05, 2020

在上一个章节内容中,我们开发了AppHeader公共顶部菜单导航栏组件,本章节呢,我们根据菜单导航的路由导航,来配置我们的 page页面,

去到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": [
   "<template>",
   " <div>$0</div>",
   "</template>",
   "",
   "<script>",
   "export default {",
    "data(){",
     " return {} ",
    "}",
   "",
   "}",
   "",
   "</script>",
   "<style scoped>",
   "</style>"
  ],
  "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命名 <div class="content-page"> , css 样式编写如下:

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

bootstrapVue 里面有一个轮播组件标签<b-carousel> ,它有一些比较重要的属性(props),首先我们给他一个

:interval="3000",这里的意思是3000毫秒轮播一次,

fade ,轮播过渡效果,

indicators, 左右切换按钮

img-width="1024",图片的宽度

img-height="480",图片的高度

background="#ababab" 设置轮播组件的背景颜色

好,我们来看一下效果;这个标签里面呢,有一个轮播组件标签 <b-carousel-slide> ,它承载着我们的轮播图片和文字信息,它的详细配置如下:

<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 的意思就是 大标题 ,text 就是介绍文字,img 就是 封面轮播图片

补充知识:NuxtServerError:Request failed with status code 500 我的解决办法与思路

一、问题来源

平时使用nuxt和部署上线都是正常运行的,偶尔有一天报500的错误;

Nuxt.js运行(npm run dev)报错如下:

nuxt 页面路由配置,主页轮播组件开发操作

服务器错误日志如下:

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):

nuxt 页面路由配置,主页轮播组件开发操作

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

四、总结

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

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

以上这篇nuxt 页面路由配置,主页轮播组件开发操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
用js实现放大镜效果
Oct 28 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 #Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 #Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 #Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 #Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 #Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 #Javascript
nuxt引入组件和公共样式的操作
Nov 05 #Javascript
You might like
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
JS的get和set使用示例
2014/02/20 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python字符串格式化方式解析
2019/10/19 Python
python 实现单通道转3通道
2019/12/03 Python
python默认参数调用方法解析
2020/02/09 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
司机的工作范围及职责
2013/11/13 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2015年中秋寄语
2015/07/31 职场文书
学生病假条怎么写
2015/08/17 职场文书