vue中路由跳转后关于轮播图的不正常执行

最新推荐文章于 2023-07-15 15:47:58 发布

烟火245

最新推荐文章于 2023-07-15 15:47:58 发布

阅读量577

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_70101091/article/details/127906003

版权

一、起因

在用vue写一个小项目时遇到一个问题，路由跳转页面后再跳转回来时轮播图图片不动了，而且跳转后会一直报错不能读取到值，当时还以为是轮播图的实现代码有问题，复检了几遍也没发现问题

然后上网看一看帖子，嘿，终于找到问题了

vue 是spa(单页面应用），跳转后一个组件的渲染内容会被另一个组件替代，这才是报错的原因之一，而另一原因就是轮播图的定时函数

路由跳转后定时函数仍在执行（它好认真，我哭死），在我们再次跳转到此页面后会再次执行一遍生命周期函数，也就会再次调用一次定时函数，这样会导致轮播图不可用。

二、解决办法

我们需要在跳转之前清除掉定时函数，这样就解决问题啦

三、总结

才用vue写这种项目，对vue的spa还有点不熟悉，没想到会有这样的问题，不过还好，问题解决了就不叫问题啦

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

烟火245

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue路由切换loading_Vue中级指南-05 Vue中路由跳的转进度条和数据加载Loading显示

weixin_32263265的博客

01-30

1908

我们在Vue项目中路由跳转时希望出现一个进度条来显示当前跳转状态,或者在数据发起请求时有个loading提示框来提示当前正在加载数据,本篇文章简单介绍一下我在项目中的使用方法。路由跳转进度条NProgress是页面跳转时出现在浏览器顶部的进度条npm install --save nprogress复制代码NProgress 使用// 如果在main.js引入并挂载在Vue实例上,请最在顶部引入,...

vue中实现传数据不跳转页面_【必看】58道Vue常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度...

weixin_39869693的博客

11-20

1008

(给前端日刊加星标，提升前端技能)作者：Lucky Girlhttps://zhuanlan.zhihu.com/p/924076281.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react...

参与评论您还未登录，请先登录后发表或查看评论

vue2中使用swiper动态遍历数据时出现不轮播的情况

熟悉JS拼写的FE

09-14

995

Vue2项目中使用Swiper5出现BUG 前言:我们再开发项目时，难免会用到一些炫酷的轮播图，目前提供较好功能并且多端兼容的就有Swiper，版本目前是4-6，常用的是swiper5，swiper是刚刚出来的最新版本(附上Swiper官网），我这里是使用5版本遇到的动态数据后不轮播的bug 1. 去Swiper找到自己想要的配置项根据自己项目需求找配置项 2. 这是我需要的swiper配置(修改bug之前) 提前下载npm install swiper data中的ban

vue中轮播图不滚动

qq_41818857的博客

06-02

699

需要在mounted钩子函数中初始化： new Vue({ el: "#app", data() { return { swiperImg: ["images/1.png", "images/2.png", "images/3.png", "images/4.png"] } }, mounted() { var mySwiper = new Swiper('.swiper-container', {

vue-splide 轮播图在切换页面时重新回到原页面之后轮播图片顺序错乱或者被替换掉的bug解决办法

SpriteDD的博客

11-11

1158

vue-splide 轮播图在切换页面时重新回到原页面之后轮播图片顺序错乱或者被替换掉的bug解决办法

element 的 el-image 导致路由跳转的时候会造成跳转路由时页面卡住，无法上下滚动

weixin_44108953的博客

08-13

812

点击el-image图片body会被加上style =“ overflow：hidden;”导致原页面和跳转的页面滚动不了单纯的记录一下出现的问题解决方法： 1、不用el-image 直接用回img标签 2、对element组件的版本进行更新，2.13.1已经修复该问题 3、看脸的是否成功，对兄弟元素的container添加点击跳转方法，对跳转页面添加监听方法这种时候哪怕div里面有el-image 也有一定几率能在跳转页面进行滚动但是不小心点了图片，加上了overflow，...

vue使用vue-awesome-swiper轮播图不能正常滚动

韩大璐

01-08

3098

在使用vue-awesome-swiper插件写轮播图的时候遇到上图的问题。问题描述：这是一个画廊（图片相册查看大图）功能，在父组件中调用这个个轮播图的子组件，并且在父组件中控制画廊组件的显示隐藏。功能都写好之后，发现这个子组件显示出来以后不能顺畅滑动。解决方案：在初始化轮播图的时候加上这两个配置项： observeParents: true, observer: tr...

vue 概述

weixin_56263402的博客

08-02

887

vue 概述

03.VUE入门

guan_xfeng的博客

04-28

535

框架: 前端框架:为开发前端代码服务的比如:vue.js node.js reactive.js 等等后端框架:为开发后端代码服务的比如:spring,mybatis,springboot,springcloud 自定义框架比如:刚刚定义的前端框架小结: 框架是一个"半成品"的应用,我们实际开发中,基于框架开发,提高开发效率需求:抽奖系统,随机抽取获奖的幸运用户 <!DOCTYPE html> <html> <head> <meta cha

vue笔记详解

weixin_51261234的博客

12-01

5334

vue 文章目录vue第一篇：邂逅vue为什么学习Vuejs？简单的认识一下Vue.jsVue.js安装Vue的初体验Vue中的MVVM创建Vue实例传入的optionsVue的生命周期第二篇：基础语法插值操作1.Mustache2.v-once3.v-html4.v-text5.v-pre6.v-clock绑定属性：1.v-bind介绍和使用v-bind基础v-bind绑定class绑定方式：对象语法绑定方式：数组语法v-bind绑定style绑定方式一：对象语法绑定方式二：数组语法计算属性1.什么是计算

Vue实现点击轮播图详解

zhang19903848257的博客

02-20

4718

制作思路轮播：图片按规定时间在一个位置从左到右滑动，并实现点击跳转相应图片原理：图片滑动即margin-left或者left的改变（和图片滑动方向有关），点击切换即点击相应按钮，跳转到相关图片（数值判断）准备：所有的图片在同一位置计算图片的滑动距离规定图片切换时间点击切换按钮 <template> <div id="lunbo"> <d...

轮播图，用vue来写一个简单的轮播图

最新发布

m0_63622279的博客

07-15

730

写的很简单，就是一个小练习，哈哈哈，下面的几张图分别是轮播图的第一张，中间图，最后一张的效果图。使用了vue 中的属性绑定 v-bind ,v-show 以及事件监听 v-on 指令。1.vue实例中声明一个data属性imgArr，用于存放每张轮播图的地址，4.最后通过v-show判断一下第一张和最后一张就不再显示左右箭头即可。2.同时定义一个默认起始索引index=0,3.然后给两边的箭头监听点击事件，// 图片url 数组。

关于Vue项目中使用轮播图遇到的几个坑

RockThatBody的博客

07-10

1577

vue项目中对轮播图进行封装调用，出现的一些Bug，记录这些踩过的坑，希望可以帮助到大家

el-dialog 嵌套 el-carousel 不自动切换

carbonzhao的专栏

05-07

1133

好比我这个功能，点击某个按钮后弹出dialog对话里面显示el-carousel，当打开后，鼠标默认就停留在el-carousel内部，结果轮播不进行，等了将近20多秒后才开始播，并且播的顺序直接到最后！经过再次测试，当弹出打开后，立即挪开鼠标后，一切正常！鼠标停留在el-dialog内部，它就不自动轮播了！Element UI做为vue.js最成功、受众最大的UI框架，在开发过程中还是存在这样那样的神经质问题！最终再次打开后，无论鼠标在什么地方，el-carousel这货开始自动按照给定的时间轮播了！

swiper vue 手机端轮播图 切换数据，图片重复的问题，刷新不能重复轮播的问题，手动控制翻页，点击翻页以后停止轮播

maoyuanh的博客

03-01

1073

切换swiper的数组以后，图片重复的问题,刷新swiper不自动轮播的问题,swiper自定义按钮左右翻页，swiper点击翻页以后停止轮播,swiper vue手机端

bootstrap轮播图不自动播放解决方案

03-02

2449

bootstrap的轮播图有些时候不自动播放，可能是页面某些元素属性冲突引起，我两个页面，一个页面可以自动播放，另一个页面不能自动播放，尝试如下方案，最终得以解决。 bootstrap版本：5.1.3 方案一：添加属性data-ride="carousel"，例子： < div id="demo" class="carousel slide" data-ride="carousel" > 结果： 不生效。方案二：手动初始化，例子：$('#demo').carousel(); .

前端、Vue轮播图，实现切换时有淡入淡出效果

qq_59456579的博客

04-25

2823

使用Vue实现的轮播图，切换时有淡入淡出效果。

vue轮播图实现点击图片跳转到外部链接

weixin_43719616的博客

06-04

6100

需求：点击轮播图中的图片跳转到外部链接，比如跳转到csdn首页。实现： 1.写出大体框架 <template> <el-carousel :interval="4000" height="400px" ref="carousel" @click.native="linkTo"> <el-carousel-item v-for="item in imgs" :key="item.url" > <img :src="item.url"/&gt

解决Vue v-for动态创建的轮播图不能正常加载问题

qindapeng的博客

09-03

1049

解决Vue v-for动态创建的轮播图不能正常加载问题

vue中路由跳转和组件跳转有什么区别

07-10

在Vue中，路由跳转和组件跳转是两种不同的导航方式。 1. 路由跳转是通过Vue Router实现的，它是基于URL路径的导航。通过定义路由表，你可以配置不同的URL路径与对应的组件关联。当用户点击链接或者通过编程方式触发路由跳转时，Vue Router会根据配置的路由规则，加载对应的组件并更新URL路径。路由跳转通常用于实现页面级别的导航，例如从一个页面跳转到另一个页面。 2. 组件跳转是通过Vue组件中的动态组件或条件渲染实现的。你可以在Vue组件中使用`<component>`标签，并通过动态绑定`is`属性指定要渲染的组件。当条件满足时，指定的组件会被渲染到DOM中；当条件不满足时，组件会被销毁并从DOM中移除。组件跳转通常用于实现局部组件的切换，例如在同一个页面内切换不同的功能模块或视图。总结起来，路由跳转是通过改变URL路径实现页面级别的导航，而组件跳转是在同一个页面内切换局部组件的展示。它们在导航方式、适用场景和实现方式上有所区别。