vue3路由跳转时不触发beforeDestroy

最新推荐文章于 2024-07-14 11:50:56 发布
最新推荐文章于 2024-07-14 11:50:56 发布
阅读量6.4k 收藏 10
点赞数 8
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rayshaan0123/article/details/119563900
版权
博客探讨了Vue应用中由于新增生命周期钩子导致的问题。在Vue的更新中，beforeDestroy已被beforeUnmount取代。文章详细解释了这一变化，并提供了相应的解决方法，即在遇到问题时将beforeDestroy替换为beforeUnmount，以保持应用正常运行。
摘要由CSDN通过智能技术生成

网上都说是keep-alive，但项目里没用keep-alive

原因：vue增加了新的生命周期

  • beforeCreate -> setup()
  • created -> setup()
  • beforeMount -> beforeMount
  • mounted -> mounted
  • beforeUpdate -> beforeUpdate
  • updated -> updated
  • beforeDestroy -> beforeUnmount
  • destroyed -> unmounted
  • errorCaptured -> errorCaptured

解决方法：beforeDestroy 换成beforeUnmount即可

rayshaan0123
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 组合式 API
qq_40453972的博客
06-25 348
vue3入门
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
生命周期的妙用——Vue3
最新发布
m0_46543935的博客
07-14 697
Vue 3 引入了组合 API，增加了更多灵活性和更好的 TypeScript 支持，同时也保留了大部分 Vue 2 的生命周期钩子，使得开发者可以选择使用传统的选项 API 还是新的组合 API。通过对比，可以看到 Vue 3 的生命周期钩子和 Vue 2 的钩子有一定的对应关系，同时引入了新的钩子来增强调试和响应式功能。
解决Vue中的生命周期beforeDestory不触发的问题（用了keep-alive）
han_xiao_xiao的博客
09-21 6250
给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed
vue中beforeDestroy销毁定时器不生效
niesiyuan000的博客
07-10 1094
【代码】vue中beforeDestroy销毁定时器不生效。
vue3项目返回第三方页面onBeforeUnmount和onBeforeRouteLeave失效问题
热门推荐
mewmew1的博客
06-22 1万+
vue3项目埋点需求，需记录页面浏览时长，入口在第三方页面，从vue3页面返回到入口页时，onBeforeUnmount、onBeforeRouteLeave全部失效不执行，在vue3项目里组件之间跳转没问题。经测试，popstate事件监听pc端及移动端都失效；js的beforeUnload事件在pc端谷歌浏览器上返回第三方页面有效，vue项目内组件跳转无效，ios手机上全部无效。 解决方法： 监听js的pagehide事件，在pc端及移动端都有效，返回第三方页面和vue项目内跳转、vue项目里点击按钮跳
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
总之，解决Vue中使用bus总线时第一次路由跳转数据未成功传递的关键在于理解Vue的生命周期，并合理安排`$emit`和`$on`的执行时机。正确地使用生命周期钩子可以避免这个常见的陷阱，确保数据在组件间顺畅传递。
vue通过路由实现页面刷新的方法
08-28
但是，当我们跳转到其他页面时，beforeDestroy 方法不会被触发，从而导致 bus 事件无法被销毁。为了解决这个问题，我们可以使用 beforeRouteLeave 方法来销毁 bus 事件。在这个方法中，我们可以使用 $off 方法来销毁...
阻止页面跳转/路由拦截
xiaokangna的博客
08-03 1919
实现方法：使用路由拦截进行拦截操作，就比如我离开这个页面的时候有系列操作需要执行，这时候就可以使用路由拦截beforeRouteLeave。工作日常分享：今天有个需求，在离开这个页面的时候去执行一些按钮操作，但是跳转路由都是统一封装好的。...
a页面跳转至b页面时vue生命周期的触发时机
weixin_41652495的博客
08-11 1000
vue不同页面生命周期 created、mounted、beforDestroy
vue3入门知识点
www658的博客
08-10 1282
vue3初级知识点！干货！
vue3 的setup和生命周期
Stars_in_rain的博客
02-06 2115
在setup 中，有9个旧的生命周期钩子可以访问：其中setup函数是整合 created跟 beforeCreatbeforeMount ->onBeforeMount （挂载前）mounted -> onMounted （挂载后）beforeUpdate -> onBeforeUpdate**（更新前）**updated -> onUpdated （更新后）beforeDestroy -> onBeforeUnmount ( 销毁前）
vue3基础知识
fury的博客
09-13 414
Pinia 的使用方式，见Pinia开发指南，有详细介绍。这两都是用于创建响应式对象，ref 通常用于创建基础类型，reactive 通常用于创建响应式，这是官方推荐的，现实中也不尽然，有人也用 ref 来定义数组，也有人一个组件只定义一个 reactive，所有数据都放里面，就像 Vue2 的 data 一样，也有人都用。这两共同点就是用来创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象，解构出来的属性值依然是响应式属性，如果不用这两直接解构的话是会丢失响应式效果的。
初学Vue（全家桶）-第19天（vue3）：计算属性、监视属性、vue3生命周期
lalala_dxf的博客
06-26 404
功能和vue2中的一样，只是写法上有些许区别，但vue3目前仍可以使用vue2中的写法，不过不推荐。 vue3中计算属性的使用具体看例子，不赘述了 vue3中watch和vue2中的使用方式很相似。 2.3 watchEffect函数 watch的套路是既要指名监视的属性，也要指明监视的回调 watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 watchEffect有点像computed： 区别在于computed注重的是计算出来的值（回调函数的返回值）
Vue3项目解决路由缓存问题---使用onBeforeRouteUpdate导航钩子
听海边涛声
05-28 278
Vue3项目解决路由缓存问题---使用onBeforeRouteUpdate导航钩子
vue中，页面使用＜keep-alive＞缓存，页面切换不调用beforeDestroy和destroyed
柒个橙子的博客
03-29 3612
不设置keep-alive，离开当前路由时，会调用beforeDestroy和destroyed来销毁。 当设置keep-alive之后，不会直接调用这组销毁生命周期函数，而是在生命周期函数中新增两个：activated和deactivated。 第一次进入页面时，生命周期函数执行简单来说是这样的： 当退出时，会触发deactivated()函数； 当再次进入该页面时，只会执行activated()函数。 配合导航守卫，手动调用生命周期销毁函数 beforeRouteLeave (to, from,
Vue3-37-路由-组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate
northcastle的博客
01-05 5002
vue3 中的组件内的路由守卫的 组合式API ，onBeforeRouteLeave 和 onBeforeRouteUpdate 的基本使用演示
vue3 setup 使用 beforeRouteEnter 组件内路由守卫
桃李不言下自成蹊
05-30 1380
setup 中只有onBeforeRouteLeave、onBeforeRouteUpdate两个钩子函数， 没有beforeRouteEnter对应的钩子函数，所以无法在setup中直接使用
vue3路由跳转导致 路由之外的组件不刷新
07-04
在Vue3中，当你使用路由（例如Vuex Router）进行导航时，如果只是简单地通过`this.$router.push()`或`this.$router.replace()`跳转到新的路由，可能不会自动更新当前页面之外的其他非激活组件的状态。 这是因为Vue的渲染机制依赖于组件树的更新和懒加载策略。当路由切换时，Vue只会重新渲染当前被激活的组件（即新路由对应的组件），而不会去刷新那些还未进入视图范围的组件。 为了解决这个问题，你可以尝试以下几个方法： 1. **手动刷新**: 在需要更新的组件上添加一个生命周期钩子，如`beforeDestroy`，在此处触发数据的重载或刷新操作。 ```javascript export default { beforeDestroy() { this.refreshData(); }, methods: { refreshData() { // 你的刷新逻辑 } } } ``` 2. **使用`keep-alive`属性**: 如果这些组件可能会被再次激活，你可以考虑将它们放入`<router-view>`的`keep-alive`包裹，这样即使离开视图，也会缓存起来，下次路由返回时会被重新渲染。 ```html <template> <div> <router-view :key="route.fullPath" keep-alive></router-view> <!-- 其他静态内容 --> </div> </template> ``` 3. **使用`$router.app.$forceUpdate()`**：虽然这不是最佳实践，但在某些特殊情况下，比如需要立即更新所有组件时，可以在路由切换后调用此方法强制整个应用的视图更新。 ```javascript this.$router.push('/new-route').then(() => { this.$router.app.$forceUpdate(); }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值