当前位置：首页 > VUE

vue router 实现onshow

2026-03-07 22:28:25VUE

Vue Router 实现 onShow 生命周期

Vue Router 本身不直接提供 onShow 生命周期钩子，但可以通过以下方法模拟类似功能。

使用导航守卫

通过 Vue Router 的全局前置守卫或组件内守卫，可以监听路由变化并触发特定逻辑。

vue router 实现onshow

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 执行类似 onShow 的逻辑
    console.log('Route is about to show');
  }
  next();
});

使用 watch 监听 $route

在组件内部，可以通过 watch 监听 $route 对象的变化，模拟 onShow 行为。

export default {
  watch: {
    '$route'(to, from) {
      if (to.path === '/your-path') {
        // 执行类似 onShow 的逻辑
        console.log('Component is showing');
      }
    }
  }
}

结合 activated 生命周期钩子

对于被 <keep-alive> 缓存的组件，可以使用 activated 钩子实现类似 onShow 的效果。

vue router 实现onshow

export default {
  activated() {
    // 组件被激活时调用，类似 onShow
    console.log('Component is now visible');
  }
}

自定义指令实现

创建一个自定义指令，在元素显示时触发回调函数。

Vue.directive('on-show', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        binding.value();
      }
    });
    observer.observe(el);
  }
});

// 使用方式
<div v-on-show="handleShow">内容</div>

使用 Vue 的 mounted 和 updated

对于不需要精确路由控制的场景，可以使用 mounted 和 updated 生命周期钩子。

export default {
  mounted() {
    this.handleShow();
  },
  updated() {
    this.handleShow();
  },
  methods: {
    handleShow() {
      // 显示逻辑
    }
  }
}

这些方法可以根据具体需求选择使用，组合使用效果更佳。对于需要精确控制组件显示/隐藏逻辑的场景，推荐使用导航守卫结合 watch 或 activated 的方式。