当前位置：首页 > VUE

vue router 实现onshow

2026-01-08 07:10:33VUE

Vue Router 实现 onShow 功能

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

使用导航守卫

导航守卫可以在路由切换时触发特定逻辑，类似于 onShow 的效果。

const router = new VueRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 执行类似 onShow 的逻辑
    console.log('路由即将显示')
  }
  next()
})

使用组件内守卫

在组件内部使用 beforeRouteEnter 和 beforeRouteUpdate 守卫来实现类似功能。

export default {
  beforeRouteEnter(to, from, next) {
    // 不能访问 this，因为组件实例还没被创建
    next(vm => {
      // 通过 vm 访问组件实例，执行 onShow 逻辑
      vm.handleOnShow()
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变但组件被复用时调用
    this.handleOnShow()
    next()
  },
  methods: {
    handleOnShow() {
      console.log('组件显示')
    }
  }
}

使用 watch 监听路由变化

通过监听 $route 对象的变化来触发 onShow 逻辑。

export default {
  watch: {
    '$route'(to, from) {
      if (to.path === '/your-path') {
        this.handleOnShow()
      }
    }
  },
  methods: {
    handleOnShow() {
      console.log('路由显示')
    }
  }
}

使用 activated 生命周期钩子

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

export default {
  activated() {
    // 当组件被激活时调用
    this.handleOnShow()
  },
  methods: {
    handleOnShow() {
      console.log('组件激活显示')
    }
  }
}

组合使用多种方法

为了更全面地覆盖各种场景，可以组合使用上述方法。

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => vm.handleOnShow())
  },
  beforeRouteUpdate(to, from, next) {
    this.handleOnShow()
    next()
  },
  activated() {
    this.handleOnShow()
  },
  watch: {
    '$route'(to, from) {
      this.handleOnShow()
    }
  },
  methods: {
    handleOnShow() {
      console.log('组件显示逻辑')
    }
  }
}

这些方法可以根据具体需求选择使用，它们都能在不同程度上实现类似 onShow 的功能。

vue router 实现onshow