How to use beforeRouteEnter in setup hook?

Question

How to use beforeRouteEnter in setup hook?

There is no any mention of onBeforeRouteEnter hook in the documentation. There are only two hooks documented onBeforeRouteLeave and onBeforeRouteUpdate.

Answer 1

In the composition API, the timing of setup roughly equates to created in Vue 2. By that time, the routing has already occurred, so there would be no meaning to a beforeRouteEnter inside of setup.

You can use beforeRouteEnter alongside setup:

setup() {
  console.log('SETUP')
},
beforeRouteEnter(to, from, next) {
  // Do something
  next({ path: '/foo' }); // Go somewhere else if necessary
  next();                 // Or stay here
}

Or you may prefer to put your code in the router config instead, using beforeEnter (affects a single route) or beforeEach (affects all routes)