Nuxt触发了即将销毁组件的生命周期钩子函数

最新推荐文章于 2023-07-06 17:55:29 发布
最新推荐文章于 2023-07-06 17:55:29 发布
阅读量848 收藏
点赞数
分类专栏： 那些年我们遇到的坑 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kobeloveu/article/details/121472822
版权

2021年11月22日15:30:56
nuxt项目中，接口重复请求！！！
一番查看，方法都调用了一次，但唯独接口调用了两次，未解决！！！

另外发现，点击浏览器返回按钮，竟然触发了即将销毁的组件的mounted函数，还是3次，我惊呆了！！！ 经过一番玄学测试，竟然是transition这个罪魁祸首，简直伤心病狂！！！删除之后上述问题消失。
解决问题，跳转页面钱触发loading，导致页面闪烁！

Er ist träumer.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nuxt3组件的使用与布局模板的学习源码
03-26
Nuxt3组件的使用与布局模板的学习源码
Nuxt.js使用VUE生命周期钩子函数重复调用接口问题(created()调用两次)
xiaosong2001的博客
11-06 5682
Nuxt.js使用VUE生命周期钩子函数重复调用接口问题(created()调用两次) 解决问题前要先了解客户端渲染和服务端渲染的区别 1、客户端渲染 简单理解就是，在服务端放一个html 页面，客户端发起请求，服务端把页面发送过去。客户端从上到下依次解析，如果发现ajax请求就再发送新的请求，拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。如图： 但是，这种渲染方式存在的弊端也是不容忽视的，比如请求量大时首屏渲染慢，不利于seo等问题。服务端渲染恰好弥补了这些不足。 2. 服务端渲染
vue2页面及组件的生命周期执行过程及销毁过程随笔
weixin_57044893的博客
12-27 1839
执行顺序： （父）beforeCreate() (父) created() (父) beforemount() (子) beforeCreate() (子) created() (子) beforeMounte() (子) mounted() (父) mounted()
nuxt2：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态
snowball的博客
03-31 1139
思路：列表页点击查看增加缓存，实现从详情回到列表回到离开时的状态；点菜单清除缓存，实现展示新数据/初始化状态。 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存。include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存。include包含的 && 排除exclude包含的 就是需要缓存的组件。max：可传数字，限制缓存组件的最大数量,默认为10。一、keepalive简介。
nuxt.js生命周期
weixin_50379372的博客
09-10 1643
服务端生命周期和客户端生命周期
【Nuxt】nuxt的生命周期
qq_53715003的博客
11-10 1891
Nuxt生命周期
关于解决nuxt3快速切换页面时导致白屏数据丢失的BUG
最新发布
u014226080的博客
07-06 1569
重写router钩子函数，我们在plugins这个目录下创建一个文件，名字随便你，然后将以下代码复制进去，这种方法不会让你丢失之前跳转过的路径，以便用户可以使用游览器的回退。关于此问题的一个官方的issue：https://github.com/vuejs/core/issues/8105。这是一个远古bug，在3.0预览版的时候就存在，都Nuxt3.6稳定版了，还没修复，以下是目前解决这个问题的两个方案。当我们快速切换页面的时候，页面就有可能触发这个bug，导致整个页面白屏！
nuxt学习笔记
Mjs1998的博客
03-02 734
安装 npx create-nuxt-app 项目名 开发 npm run dev 打包 npm run build ​ npm run start nuxt.config.js 文件修改过以后要重新启动项目。 生命周期：运行在服务端的钩子函数： ​ 一、 nuxtServerInit（初始化东西到store中） ​ 二、 middleware(中间件) ​ 中间件：middleware目录下的auth.js中暴露出函数 ​ export default （）=》{}
nuxt生命周期
webjhh的博客
07-02 1万+
nuxt官方虽然有给出图，但是比较笼统，不够详细，现在通过官方的图，配合自己的理解画出一下流程图，供还没弄明白的同学参考。 配合项目输出图示 ...
NUXT使用全局组件
gitcoder的博客
04-09 4016
#NUXT使用全局组件 在使用nuxt的过程中，使用element-ui做了一个步骤条的小组件，希望在多个页面使用，想注册为全局组件，找了很多教程，终于实现了，记录一下。 一：在components文件夹下写自己的组件，比如我的为StepCtrl.vue 二：在plugins文件夹下建一个文件，我想做一个相当于一个全局组件注册器的插件，所以我起名为components-register.js im...
在nuxt项目中使用component组件
weixin_34290352的博客
02-14 3493
编写组件页面 1.在components下新建一个新建组件页面，如下所示 2.新建完成之后初始页面的代码如下所示： 3.下面从element-ui上找一个顶部导航菜单写到组件页面。 <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @sele...
基于Vue.js+Nuxt开发自定义弹出层组件
10-14
主要介绍了基于Vue.js+Nuxt开发自定义弹出层组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
nuxt-tailvue:用于tailvue组件的nuxt模块
04-13
尾巴Nuxt.js模块，用于tailvue组件这需要带有模块的快速设置将nuxt-tailvue依赖项添加到您的Nuxt.js项目中npm install nuxt-tailvue# ORyarn add nuxt-tailvue 添加nuxt-tailvue到modules的部分nuxt.config.js （这...
组件：扫描并自动导入Nuxt.js 2.13+的组件
02-17
@ nuxt /组件 用于扫描和自动导入Nuxt 2.13+的组件的模块 目录 特征 自动扫描components/目录 不再需要手动导入组件 具有可定制前缀和查找/忽略模式的多个路径 延迟加载（异步组件） 生产代码拆分优化（加载...
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
01-18
Nuxt嵌套路由官网上的API详解：点击链接 ... 父组件的页面的内容 <!-- 进行切换子页面，写法同vue.js --> <li><nuxt to='/parent/child'>child</nuxt> <li><nuxt to='/parent/child2'>child2</nux
让Nuxt.js项目更贴近多页面程序（路由跳转无法触发函数等问题）
huangzhixin1996的博客
07-24 920
nuxt中的跳转问题
nuxt 遇到的解决的问题
annuobin1120的博客
05-28 756
1 pwa 用nuxt 无法做 pwa 或者说做pwa 较困难 因为nuxt 并没有暴露出 index.html 文件，无法在里边注册pwa 而且无法拷贝sw.js到根目录， 因为sw.js 默认托管他所在的目录下 一般是放在根目录比较合适。然而nuxt 起来的服务 默认所有的都在 _nuxt 虚拟目录下 所以托管困难 2 埋点 埋点 一般需要嵌入一段js 代码 有的要求放入紧挨着bod...
nuxt页面跳转_Nuxt.js 遇到的问题
weixin_39965075的博客
12-21 1550
Nuxt.js 主要是 Vuejs SSR 后端渲染一个开箱就可以食用的实现，想要有更高的自由度可以去参考：Vue.js 服务器端渲染指南。如果仅仅只是为了解决 SEO 的问题，贸然采用 Vuejs SSR 显然不是一个好的选择。CSS 模块化Nuxtjs 在任意 .vue 文件中引入 CSS 文件，即便是在不同的 layout 中引入，都会变成全局样式，个人的解决方法有两种：1. 加入顶部 cl...
Nuxt.js ---- 基于 Vue.js 的服务端渲染应用框架(实战篇三)
热门推荐
业余丰富各种技术栈
07-05 1万+
利用Nuxt.js,手把手教会你搭建一个完整的服务器渲染应用(SSR)，利用EventBus开发一个全局弹窗组件
nuxt 在服务器触发的生命周期
05-20
Nuxt.js 在服务器端渲染时会触发以下生命周期： 1. `nuxtServerInit`: 在服务端渲染期间，该钩子函数会在初始请求时被调用，可以用来初始化 Vuex Store 的数据。 2. `middleware`: 在服务端渲染期间，`middleware` 中间件会在 `nuxtServerInit` 之后被调用，用于处理一些请求前的操作，例如鉴权、数据获取等。 3. `validate`: 在服务端渲染期间，`validate` 钩子函数会在路由匹配之前被调用，用于验证路由参数的有效性。 4. `asyncData`: 在服务端渲染期间，`asyncData` 钩子函数会在组件实例化之前被调用，用于获取组件所需的异步数据。 5. `fetch`: 在服务端渲染期间，`fetch` 钩子函数会在组件实例化之后被调用，用于获取组件所需的异步数据。 6. `beforeCreate`: 在服务端渲染期间，`beforeCreate` 钩子函数会在组件实例化之后被调用，在客户端渲染时，该钩子函数会在组件挂载之前被调用。 7. `created`: 在服务端渲染期间，`created` 钩子函数会在组件实例化之后被调用，在客户端渲染时，该钩子函数会在组件挂载之后被调用。 8. `beforeMount`: 在客户端渲染期间，`beforeMount` 钩子函数会在组件挂载之前被调用。 9. `mounted`: 在客户端渲染期间，`mounted` 钩子函数会在组件挂载之后被调用。 在服务端渲染期间，`asyncData` 和 `fetch` 钩子函数会被自动调用，而在客户端渲染时，需要手动触发这两个钩子函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值