vue router 实现onshow

实现 Vue Router 的 onShow 功能

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

使用 watch 监听路由变化

在组件中使用 watch 监听 $route 对象的变化，当路由变化时触发相应的逻辑。

watch: {
  '$route'(to, from) {
    if (to.path === '/your-path') {
      // 相当于 onShow 的逻辑
      console.log('组件显示');
    }
  }
}

使用导航守卫

在全局或组件内使用导航守卫，在路由进入时执行特定逻辑。

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 相当于 onShow 的逻辑
    console.log('组件显示');
  });
}

使用 activated 生命周期钩子

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

activated() {
  // 相当于 onShow 的逻辑
  console.log('组件显示');
}

结合 Vue 自定义事件

在父组件中监听路由变化，通过自定义事件通知子组件。

// 父组件
watch: {
  '$route'(to, from) {
    if (to.path === '/your-path') {
      this.$refs.child.handleShow();
    }
  }
}

// 子组件
methods: {
  handleShow() {
    // 相当于 onShow 的逻辑
    console.log('组件显示');
  }
}

注意事项

• 如果组件未被 <keep-alive> 缓存，activated 钩子不会触发。
• 使用 watch 监听路由时，确保逻辑不会在不需要的时候执行。
• 导航守卫适用于全局或组件级别的控制，灵活性较高。