账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    beforeRouteEnter next()不起作用
    30
    0

    问题描述

    在访问某个页面之前,在beforeRouteEnter里面用了Promise获取一些接口数据,然后next()回调vm赋值,现在出现的问题就是正常进入这个页面后,next回调都没有触发,只有再次刷新这个页面之后才会触发。这是什么问题导致的。

    问题出现的环境背景及自己尝试过哪些方法

    我试了下,在promise外next()没有问题,能够正常打印。是promise的问题吗?如果是为什么第一次不行,再次刷新页面就行。还是再次刷新导致了beforeRouteEnter有什么触发了吗?

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)
    Promise.all(['getALLData']).then((values)=>{

                  next(vm=>{
                    console.log('next')
                    vm.createWS()
                  })
                })
    

    你期待的结果是什么?实际看到的错误信息又是什么?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 困城寄她 普通会员 1楼
      `beforeRouteEnter` 是 Vue Router 的导航守卫之一,它在进入路由组件渲染前执行。在这个钩子中,由于此时组件实例还没有被创建,因此不能直接访问组件实例的属性或方法。 你可能会看到 `next()` 函数并没有起作用的情况,这通常是因为以下原因: 1. 没有正确调用 `next` 函数。你需要确保至少调用一次,并且如果需要获取组件实例,可以通过给 `next` 传入一个回调函数来实现: ```javascript beforeRouteEnter (to, from, next) { // 在这里进行你的预进入逻辑判断 next(vm => { // 这里可以访问到组件实例 `vm` }) } ``` 2. 如果你在 `beforeRouteEnter` 中使用了异步操作,必须确保在异步操作完成后再调用 `next`,否则可能造成守卫未生效的问题: ```javascript beforeRouteEnter (to, from, next) { async function fetchSomeData() { const data = await fetchData(); next(vm => { vm.someData = data; }); } fetchSomeData(); } ``` 3. 确保你的代码逻辑没有提前跳转或阻止了路由的前进,如错误地调用了 `next(false)` 或 `this.$router.push()` 等。 以上是针对 `beforeRouteEnter` 守卫中 `next()` 可能不起作用的一些常见情况,请根据实际情况排查。
    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部