vue 生命周期 返回不触发_vue返回不刷新并触发事件

在Vue应用中,当用户返回上一页时,通常页面会重新执行生命周期并加载数据。为了实现类似微信小程序的体验,即返回时不触发onLoad但触发onShow,可以利用keep-alive组件和路由元信息来控制。具体做法包括在路由配置中设置meta属性,以及在组件的activated钩子中处理数据初始化和请求。这使得页面在返回时仅执行activated,避免了不必要的刷新。
摘要由CSDN通过智能技术生成

vue返回上一页的时候,默认都会重新执行生命周期,重新加载数据,这样其实不太友好。那我们仿照微信小程序,返回上一页不会触发onLoad,但是会触发onShow,我们就可以在onShow里面做一些事情。

1、使用keep-alive,控制页面返回不刷新

2、如果只想缓存部分页面,可以在路由中设置一个参数控制

// app.vue

// router/index.js

{

path: '/usermanage',

name: 'usermanage',

meta: {

keepAlive: true, //该字段表示该页面需要缓存

isBack: false, //判断是否是返回

title: '人员管理'

},

component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载

},

3、路由页面处理

export default {

name: 'userManage',

data() {

return {

isFirstEnter: false

}

},

beforeRouteEnter(to, from, next) {

if (from.name == 'nextName') { // 这个name是下一级页面的路由name

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个流行的前端框架,它提供了一些生命周期钩子函数,使得我们可以在组件不同的生命周期中执行自定义行为。其中,beforeDestroy 钩子函数是在组件即将销毁之前被调用的。在实际开发中,我们可能会遇到 beforeDestroy 钩子函数不触发的问题,这种问题可能由以下原因引起: 1.代码中未正确实现 在组件内部,beforeDestroy 钩子函数应该写成: beforeDestroy () { // do something before destroying the component } 如果 beforeDestroy 钩子函数没有被正确实现,它就无法被调用。因此,我们应该仔细检查代码,确保正确使用了这个钩子函数。 2.组件没有被正确销毁 如果组件没有被正确销毁,beforeDestroy 钩子函数就会无法被调用。这可能是由于组件依赖于引用计数而不是垃圾回收机制,而在某些情况下,组件可能会被保留在内存中而没有被正确销毁。 为了解决这个问题,我们可以在销毁组件时手动调用 $destroy 方法: this.$destroy() 这将触发组件的 beforeDestroy 钩子函数,并将组件完全从内存中清除。 3.使用异步代码 在某些情况下,如果我们在 beforeDestroy 钩子函数中使用了异步代码,它可能会导致钩子函数不被调用。这是由于 Vue 在异步代码执行之前已经销毁了组件。 为了解决这个问题,我们可以将异步代码放在 Vue.nextTick 回调函数中执行,以确保组件在销毁之前执行完所有异步操作: beforeDestroy () { Vue.nextTick(() => { // execute async code here }) } 总之,为了确保 beforeDestroy 钩子函数被正确触发,我们应该仔细检查代码,确保正确实现了钩子函数,并手动调用 $destroy 方法,并避免在钩子函数中使用异步代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值