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 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
javascript动画浅析
2012/08/30 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python psutil模块使用方法解析
2019/08/01 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis