当前位置：首页 > VUE

vue router 实现onshow

2026-02-10 22:42:17VUE

Vue Router 实现 onShow 功能

在 Vue Router 中，没有直接的 onShow 生命周期钩子，但可以通过以下几种方式模拟类似功能。

使用路由守卫

路由守卫可以监听路由变化，在组件显示时触发特定逻辑。beforeRouteEnter 和 beforeRouteUpdate 守卫可以用于实现类似 onShow 的效果。

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 组件首次进入时触发
      vm.onShow();
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 路由更新时触发
    this.onShow();
    next();
  },
  methods: {
    onShow() {
      console.log('组件显示');
    }
  }
}

使用 watch 监听 $route

通过监听 $route 变化，可以在路由切换时执行特定逻辑。

export default {
  watch: {
    '$route'(to, from) {
      this.onShow();
    }
  },
  methods: {
    onShow() {
      console.log('组件显示');
    }
  }
}

使用 activated 生命周期钩子

如果组件被 <keep-alive> 缓存，可以使用 activated 钩子模拟 onShow 功能。

export default {
  activated() {
    this.onShow();
  },
  methods: {
    onShow() {
      console.log('组件显示');
    }
  }
}

结合导航守卫和组件内守卫

在全局或路由独享的守卫中触发自定义事件，组件内监听该事件。

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresOnShow)) {
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('route-show', { detail: to }));
  }
  next();
});

// 组件内
export default {
  mounted() {
    window.addEventListener('route-show', this.handleRouteShow);
  },
  beforeDestroy() {
    window.removeEventListener('route-show', this.handleRouteShow);
  },
  methods: {
    handleRouteShow(event) {
      if (event.detail.path === this.$route.path) {
        this.onShow();
      }
    },
    onShow() {
      console.log('组件显示');
    }
  }
}

这些方法可以根据具体需求选择使用，灵活实现类似 onShow 的功能。

vue router 实现onshow