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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
Javascript函数式编程语言
Oct 11 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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
基于文本的留言簿
2006/10/09 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
Cookie 小记
2010/04/01 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python difflib模块示例讲解
2017/09/13 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
管理站站长岗位职责
2013/11/27 职场文书
公司授权委托书样本
2014/09/15 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
年度考核表个人总结
2015/03/06 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
python获取字符串中的email
2022/03/31 Python