vue.js - Router async beforeEach 触发两条路由

Question

我正在尝试在我的路线守卫中等待异步响应。问题是两条路线都被击中了。
当页面加载时，/路线立即触发，然后是我的目标路线

router.beforeEach(async (to, from, next) => {
  await new Promise(resolve => {
    setTimeout(resolve, 500)
  })
  next()
})

或者

router.beforeEach((to, from, next) => {
    setTimeout(next, 500)
  })
})

在我的日志中，我在访问 /foo 时看到两个条目, 第一 /然后 /foo 500 毫秒后。我期待只看到后者:

setup(props, { root }) {
    const hideNav = computed(() => {
      console.log(root.$route.path)
      return root.$route.meta?.hideNav
    })

    return {
      hideNav
    }
  }
})

我正在使用 vue@2.6.12和 vue-router@3.4.9

Answer 1

我不确定，但这就是我在 Vue 组件中保护我的路线的方式，希望这对您有所帮助

 beforeRouteEnter(to, from, next) {
    if (store.getters.isAuthenticated) {
      Promise.all([
        store.dispatch(FETCH_ARTICLE, to.params.slug), 
        store.dispatch(FETCH_COMMENTS, to.params.slug)
      ]).then(() => {
        next();
      });
    } else {
      Promise.all([store.dispatch(FETCH_ARTICLE, to.params.slug)]).then(() => {
        next();
      });
    }
  },