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，第一/则/foo500毫秒后。我期待只看到后者：

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

您尝试过使用beforeEnter吗？
这样你就可以指定哪些路由将执行你的函数

就像下面这段代码：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})