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

2024-12-18 03:49:49

在上一个章节内容中，我们开发了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)报错如下：

服务器错误日志如下：

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 页面路由配置,主页轮播组件开发操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

nuxt引入组件和公共样式的操作

1,引入组件在components目录创建组件,在页面中引入组件例如引入公共导航栏创建组件components/Nav.vue 引入组件layouts/default.vue 2,引入公共样式 assets/css/common.css 在nuxt.config.js中引入若引入less或者sass: 补充知识:在nuxt项目中使用component组件编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从elem
nuxt 每个页面head标签内容设置方式

导读在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致: 所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取: 好,我们打开index.vue,编辑如下: head(){ return { title: 'jokes home page', meta: [{ hid: "description
Nuxt pages下不同的页面对应layout下的页面布局操作

有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用. pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容. 举个例子 1.layouts/custom_layout.vue: <template> <div> <div class
nuxt.js写项目时增加错误提示页面操作

为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验. 实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户: nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法此项目中的错误提示页面是放在layouts目录中: layouts中的error.vue页面内容为: <template>
nuxt 服务器渲染动态设置 title和seo关键字的操作

使用如下钩子即可,但是前提条件是没有默认配置head的title asyncData ({ app }, callback) { app.head.title = 'new title' callback(null, {}) }, 补充知识:vue 每个页面动态切换title keywords description (seo的设置) 最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description !!!在这里先添加一步: html文件添加 <meta
nuxt 实现在其它js文件中使用store的方式

前言在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面. 我们都知道如何在vue中如何使用. 代码 /* * @Description: * @Author: lxc * @Date: 2019-07-02 16:14:07 * @LastEditTime: 2019-08-14 16:08:19 * @LastEditors: lxc */ // 导出 store 的地方 imp
解决nuxt 自定义全局方法,全局属性,全局变量的问题

注意 ,这个在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取 commom.js 测试代码 import Vue from 'vue' var comsys= { install(Vue){ Vue.prototype.comsys = { val:function(val){
nuxt 页面路由配置,主页轮播组件开发操作

在上一个章节内容中,我们开发了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/ma
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

VueSliderShow故名思意,vue的轮播图组件插件,该插件: 1.支持浏览器任意放缩,兼容移动端, 2.支持自动切换,鼠标经过停止切换,分页/任意页点击切换,左右切换, 3.支持文字介绍(超过一行自动省略) 本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程,包含发布到npm,构建自己的npm包,供下载安装使用的技巧,阅读本文需要些Vue的语法糖(自定义标签.计算属性.父子组件通信等),以及ES6.npm等基础知识.先来看下Demo 示例源码地址 Install
Angular2利用组件与指令实现图片轮播组件

前言如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的"生物"还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情. 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个"器官",功能是呈现图片,并感知用户的点击或手势来切换图片. 一.创建组件结束上文
值得分享的JavaScript实现图片轮播组件

本文实例为大家分享了JavaScript实现图片轮播组件的使用方法,供大家参考,具体内容如下效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 点击查看demo 对HTML.CSS的要求: <div class="carousel-box"> <div class=&qu
JavaScript实现图片轮播组件代码示例

本文介绍了JavaScript实现图片轮播组件,废话不多说了直接看下面: 效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 对HTML.CSS的要求: <div class="carousel-box"> <div class="carousel"&g
Nuxt的路由配置和参数传递方式

学习前端框架都要学习路由机制,因为路由可以体现我们的业务逻辑,把模块串联起来,让程序换发光彩. 那简单的说路由就是我们的跳转机制,也可以简单理解成链接跳转. Nuxt.js的路由并不复杂,它给我们进行了封装,让我们节省了很多配置环节. 简单路由Demo 我们现在在根目录的pages文件下新建两个文件夹,about和news(模仿关于我们和新闻的功能模块) 在about文件夹下新建index.vue文件,代码如下: <template> <div> <h2>About I
使用JSX实现Carousel轮播组件的方法(前端组件化)

在我们用 JSX 建立组件系统之前,我们先来用一个例子学习一下组件的实现原理和逻辑.这里我们就用一个轮播图的组件作为例子进行学习.轮播图的英文叫做 Carousel,它有一个旋转木马的意思. 上一篇文章<使用 JSX 建立 Markup 组件风格>中我们实现的代码,其实还不能称为一个组件系统,顶多是可以充当 DOM 的一个简单封装,让我们有能力定制 DOM. 要做这个轮播图的组件,我们应该先从一个最简单的 DOM 操作入手.使用 DOM 操作把整个轮播图的功能先实现出来,然后在一步一步去考虑怎
基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
利用Vue实现移动端图片轮播组件的方法实例

前言轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点支持自动播放 & 无限轮播 (loop) 效果支持用户滑
Bootstrap图片轮播组件使用实例解析

使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间,图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小. 同时说一下,Carousel这个词的本义是回旋木马. 一.基本目标在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明. 由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但是

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

相关推荐

随机推荐