vue开发遇到进入子页面就调接口，二次进入子页面时，接口请求却不会调用了的问题

最新推荐文章于 2024-05-11 00:02:15 发布
最新推荐文章于 2024-05-11 00:02:15 发布
阅读量2.4k 收藏 1
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A186G/article/details/121215483
版权

在vue实际项目中，很多时候会在mounted或者created请求数据接口然后渲染到页面上，但是这两个生命周期都是只会在第一次进入页面后执行，再次进入该页面时，由于vue-router的机制，会缓存已经加载过的页面数据这样会大大提高效率，所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据，跳转到这个页面，修改的数据并没有变化。

解决方法，用activated（）{}，代替mounted或者created

JY-HPS
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
然而，在某些情况下，尤其是当对同一个接口连续发起请求时，可能会遇到返回数据混乱的问题。这主要是由于网络延迟、请求并发控制等因素导致请求的顺序与预期不符，从而影响了前端的数据处理。本文将深入探讨这个问题...
在vue中使用axios作交互时，为什么会调用两次接口
04-20
原来在 CORS-跨域资源共享 中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；...
【javascript】axios多次调用一个接口，取消之前的请求办法。
qq_39576711的博客
04-28 3780
有时我们在项目中可能会遇到连续调两次同一个接口的情况，而我们只需要最后一次的结果。比如用户连续点了两次不同的筛选框，但是服务器返回的时候，第二次那个接口先返回了，那么当第一次点击的接口再返回的时候，就把第二次的结果覆盖掉了，造成数据与筛选框不一致的情况。这个时候，可以用下面的方法，当同样的请求发出时，取消上一个请求： //这个数组用来存储需要在连续调用时，取消上次请求的接口 //建议用正则处理一下，不要用完整的url，因为开发环境、测试环境和线上环境的ip或者url是不一样的 const cancelLis
vue项目中菜单切换后取消上一个页面未响应完成的接口
weixin_45654455的博客
08-09 398
疯狂点击切换菜单页面时由于某些原因接口响应慢的情况的页面响应数据会出现卡顿现象，针对这种情况采用了切换菜单取消上一个页面未响应完成的接口。3 会发现浏览器中会有报错信息是因为我们拦截了接口的调用后接口就会报错但是我们接口的响应拦截并没有处理取消调用的报错信息。首先先在requrst.js页面创建全局变量。通过router.beforeEach事件。2 判断路由变化时进行接口的取消操作。所以在响应拦截器的error方法中添加。1 监听request拦截。
2024年vue再次进入页面不会再次调用接口请求(1)，2024年最新web前端开发面试简历
最新发布
2401_84620191的博客
05-11 321
JavaScript是用来实现网页上的特效效果。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。JavaScript是用来实现网页上的特效效果。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。画的，有交互的一般都是用JavaScript来实现的。
父组件向子组件传递接口中获得的表单数据时，由于同步异步的问题导致子组件无法正确加载数据的解决办法（3种）
weixin_45889291的博客
09-22 503
vue中父组件向子组件传递接口中获得的表单数据时，由于同步异步的问题导致子组件无法正确加载数据的解决办法（3种）
解决进vue element 二次进入页面不会再次调用接口请求的问题
weixin_41955516的博客
05-25 2515
activated()钩子函数可解决进入页面不会再次调用接口请求的问题 vue项目二次进入页面时，没有刷新数据，使用此钩子函数 activated()：进入当前存在activated()函数的页面时，进入页面就触发；
vue+elementui 打开弹窗 但是弹窗的接口只会初始调用一次
Teler的博客
08-21 8872
使用element的dialog弹窗的时候 <el-dialog :title="title" :visible.sync="dialogVisible" width="68vw" > <Info></Info> </el-dialog> 这样样式比较美观好看 而且也好控制 但是如果...
解决vue请求接口第一次成功,第二次失败问题
10-14
在Vue.js应用中，有时会出现一个特殊的状况，即首次调用API接口时一切正常，但后续再次尝试调用同一接口时却出现失败。这个问题通常与HTTP请求的状态、数据的持久化、请求的类型（简单请求或非简单请求）以及跨域...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue 加载时掉用mounted_vue 页面回退mounted函数不执行的问题及解决方法
weixin_39531037的博客
12-19 2303
前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。原理解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。当在项目中引入keep-alive的时候，页面第一次进入，钩子函数的触发顺序created...
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 7788
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
解决Vue父组件进入子组件调用一次create函数
weixin_44813417的博客
11-03 2062
弹框中出现子组件 每次显示弹框时子组件调用一次create() （原本为进入多次，只有在第一次能调用create()） 解决方案： 在外层包一个div 添加属性v-if v-if为元素的创建和销毁 false时销毁；true为创建，则会调用一次create() <div v-if="dialogFormVisible"> <el-dialog title="" :visible.sync="dialogFormVisible" .
Vue路由第二次进入页面后created和mounted不执行
m0_61601708的博客
05-11 2628
页面每次打开，需要重新加载数据。比如在总管理页面更新了数据，那么在详情页二次打开的时候需要加载最新数据，把加载数据方法写在mounted方法里，却没有执行。这样是把这个页面的路由缓存给关闭了；true为开启，false为关闭。1.将要处理的方法，放在beforeCreate函数中。2.更改 该路由 router.js中的配置项。
Vue + Element UI 前端篇（十）：动态加载菜单
y19910825的博客
09-05 2644
如下图所示，我们在用户管理页面的时候，点击刷新浏览器，然后就白茫茫一片了，这是因为浏览器的刷新会导致整个vue重新加载，路由被重新初始化了，后面在Menu.bar添加的动态路由没有了，所以跳转的时候没有找到匹配路由，跳转的是一个不存在的页面，故而白茫茫一片。但不对呀，这里路由配置是写死的，导航菜单是菜单数据动态生成的，这个路由配置也应该是根据菜单数据动态添加的啊，嗯，所以接下来我们就来讨论动态路由配置的问题。因为我们这里是导出的是父模块，所以在具体接口调用的时候，也需要在原来的基础上加上模块了，像这样。
vue关于多个路由入口进入同一页面，列表部分取不同数据而互相跳转的问题
weixin_43772661的博客
07-28 1377
今天遇到一个bug，记录下来：项目中存在多个记录页面，每个记录页面实际上用的是同一个.vue页面，只不过通过不同的入口进入，每次进入url处的formtype值（自定义页面标识）都不一，而且，页面的列表部分调用不同的接口去拿数据，在给某个页面上了缓存以后，每个记录页面互相点击转换的过程中会拿到固定页面的缓存记录，所以我们要修改为：记录与记录之间互相转换的过程中，根据formtype的值的不同而调用后台接口拿数据，而且，在这个过程中，页面公用的部分也得回到初始化（比如所有的input搜索框），另外还得让缓存不
【VUE项目实战】17、通过接口获取菜单并渲染
程序猿之洞
10-05 5168
接上篇《16、主页Header和左侧菜单栏布局》 上一篇我们编写了头部Header和左侧菜单栏的布局样式，本篇我们来通过接口获取菜单数据，并重新加载菜单至左侧菜单栏。 一、获取菜单数据的权限 我们需要通过接口获取菜单数据，而菜单必须是在登录之后才能访问的，所以未登录前直接访问菜单接口是会被拒绝。那么登录之后又如何让接口认定前端已有权限获取数据了呢？我们回顾一下API文档中的注意事项： 即我们获取需要授权的API的数据时，必须将我们登录时获取的token令牌，封装到http请求头的Authorizatio
首次vue加载页面，请求两个接口，后者接口需要依赖前者接口的数据去请求接口。
weixin_55595808的博客
04-05 1773
首次vue加载页面，请求两个接口，后者接口需要依赖前者接口的数据去请求。
vue接口调用方式
weixin_52629158的博客
05-24 3866
但是我们大部分时候可能用上面原生的ajax的时候是很少的，我们一般都是用jQuery封装好的Api，这个前提是我们需要先引入jQuery文件，否则提示报错，jQuery的ajax使用步骤大致如下所示。前端要做动态数据渲染，只能通过调用接口的方式来获取服务端的数据，目前常见的方式有ajax，fetch，axios等常见的方式可以获取接口的数据，我们来分别认识一下这些操作方式..fetch支持很多请求的方式如POST，GET，DELETE，UPDATE，PATCH和PUT。get和 delete请求传递参数。
vue2封装axios接口请求二次封装
05-19
Vue2封装Axios接口请求的二次封装可以让我们在项目中更加方便地使用Axios进行数据请求，同时也可以提高代码的可维护性和复用性。下面是一个简单的Vue2封装Axios接口请求的示例： 1. 安装Axios 在项目中安装Axios，可以使用npm或者yarn进行安装： ```bash npm install axios --save ``` 或者 ```bash yarn add axios ``` 2. 封装Axios 在src目录下新建一个api文件夹，用于存放Axios的封装代码。在api目录下新建一个request.js文件，用于封装Axios的请求方法。 ```javascript import axios from 'axios' // 创建实例 const service = axios.create({ baseURL: process.env.BASE_URL, // 接口的基础路径 timeout: 5000 // 请求超时时间 }) // 请求拦截器 service.interceptors.request.use( config => { // 在请求发送之前做一些处理，比如添加token等 return config }, error => { // 请求错误时做些事 return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做一些处理，比如说判断返回的状态码是否正确等 return response.data }, error => { // 响应错误时做些事 return Promise.reject(error) } ) export default service ``` 在上面的代码中，我们使用了Axios的interceptors来拦截请求和响应，并做一些处理。比如说，在请求拦截器中，我们可以在发送请求之前添加token等信息；在响应拦截器中，我们可以对返回的数据进行处理，判断响应状态码是否正确等。 3. 封装API请求 在api目录下新建一个index.js文件，用于封装API请求的方法。我们可以根据实际的业务需求，封装不同的请求方法。 ```javascript import request from './request' export function getUsers () { return request({ url: '/users', method: 'get' }) } export function getUserById (id) { return request({ url: `/users/${id}`, method: 'get' }) } export function createUser (data) { return request({ url: '/users', method: 'post', data }) } // 其他API请求方法... ``` 在上面的代码中，我们使用了封装的request方法来发送请求，同时根据业务需求，定义了不同的请求方法，比如获取用户列表、根据ID获取用户信息、创建用户等。 4. 使用API请求 在Vue组件中使用API请求非常简单，只需要在组件中引入封装的API请求，然后调用对应的方法即可。 ```javascript import { getUsers } from '@/api' export default { mounted () { this.getUsers() }, methods: { async getUsers () { const { data } = await getUsers() console.log(data) } } } ``` 在上面的代码中，我们在组件中引入了封装的getUsers方法，并在mounted钩子函数中调用该方法来获取用户列表，并将返回的数据打印到控制台上。 这样，我们就完成了Vue2封装Axios接口请求的二次封装。通过对Axios进行二次封装，我们可以更加方便地使用Axios进行数据请求，并且也可以提高代码的可维护性和复用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值