Usage of beforeRouteEnter with <script setup>

[andrewcourtice]

Currently with the composition API the beforeRouteEnter hook needs to be defined outside the setup block:

export default defineComponent({

    components: {},
    props: {},

    // This needs to be defined outside the setup block
    beforeRouteEnter(to, from, next) {

    },

    setup() {
        onBeforeRouteUpdate(to => {

        });
    }

});

My understanding is that this is because the beforeRouteEnter hook has to run before the setup function. My question is - is there a plan for supporting this with <script setup>? I can't seem to find any information in the RFC or in the discussion board.

[posva]

At the moment there is a plan to support some kind of navigation guard that runs before entering the route and I started exploring it some time ago. It does require changes on Suspense and will come with an RFC for vue router once things are usable. Something like:

setup() {
  const user = ref()
  // runs on each navigation
  onBeforeResolve(async (to, from) => {
    if (to.params.userId !== from.params.userId)
      user.value = await getUsers(to.params.userId)
  })
  
  return { user }
}

Note that at the moment there are way too many redundant ways to hook into the navigation cycle too. For instance, what you are doing could be done by using a global router.beforeResolve + meta fields to point the store actions to run before updating the route. I have a few examples at https://github.com/posva/2021-amsterdam-demos/tree/main/src/views + https://github.com/posva/2021-amsterdam-demos/blob/main/src/router.ts

Update: the plan to support this kind of behavior can be found at #460

[KaliaJS]

Any news about it ?

[stafyniaksacha]

I have a simple composable implementation that works with SSR (it requires that the original request is provided in SSR context and use h3):

import { MaybeRef } from '@vueuse/core'
import { sendRedirect } from 'h3'
import { onBeforeMount, onServerPrefetch, unref, useSSRContext } from 'vue'
import { RouteLocationRaw, useRouter } from 'vue-router'

export function onBeforeResolve(
  check: () => MaybeRef<boolean>,
  to: MaybeRef<RouteLocationRaw>
) {
  const toValue = unref(to)
  const router = useRouter()

  onBeforeMount(() => {
    if (unref(check())) {
      router.replace(toValue)
    }
  })
  onServerPrefetch(() => {
    if (unref(check())) {
      const normalized = router.resolve(toValue)
      const context = useSSRContext()
      if (context?.res) {
        sendRedirect(context.res, normalized.href)
      }
    }
  })
}

[posva]

I forgot to update before, but I opened #460 to explore this idea of having a navigation guard that is ran before mounting the component

[julie777]

The options api has three component navigation guards:

    beforeRouteEnter
    beforeRouteUpdate
    beforeRouteLeave

and they all appear in the same location in the component code.

The composition api implements the same three component guards, but with different names:

   beforeEnter
   onBeforeRouteUpdate
   onBeforeRouteLeave

The big change is that the beforeEnter can't be added to the setup function. It is instead added to the route definition.

{  // part of a route definition
        path: 'actions/:id',
        name: 'actions',
        component: () => import('pages/ActionPage.vue'),
        props: true,
        beforeEnter: (to, from) => {
        ...

The other two can be defined in script setup.

[Reaster0]

that's litteraly the only ""good"" option that we have right now, but i'm just lucky that my website logic don't conflict with putting the beforeEnter outside of my setup()

[nbransby]

when added to the route definition how do you pass something into the props of the component?

      async beforeEnter(to, from, next) {
        const result = await someAsyncTask()
        next((vm) => { vm.props.result = home) } /**something like this? **/
      },

[Tofandel]

How can you do that with nuxt?

[liutkin]

Any updates on this? As a workaround, we may implement a navigation guard inside route definition, using imported store data. But that's not the case when we should put the guard logic right inside the component and validate the route based on the component's data.

[pau-santesmasses]

Another option would be to use both <script> and <script setup> as documented in https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script.

For instance, this seems to work. I'm not sure if there are any pitfalls, but I thought it was worth mentioning.

<script>
import { useFetch } from '@vueuse/core'

export default {
  beforeRouteEnter: function (to) {
    const { data } = useFetch(`/your/url/${to.params.id}`)
    to.meta.data = data
  }
}
</script>

<script setup>
defineProps({
  data: {
    type: [null, Object],
    required: true
  }
})
// ...
</script>

and then add a props resolved to the route record:

{
  path: '/your/url/:id',
  // ...
  props: to => ({ data: to.meta.data })
}

[benneq]

As soon as I put useFetch inside beforeRouteEnter my nuxt application crashes:

[Vue Router warn]: uncaught error during route navigation:

 ERROR  [worker] nuxt instance unavailable

Inside beforeRouteUpdate it works fine. I'm using nuxt3@latest

[stafyniaksacha]

@benneq you should use middleware on nuxt instead of beforeRouteEnter

[infinite-system]

thank you for this, it's all a bit roundabout, but it works!

[hahatulk]

vue 3, works great
Thanks!

[aacassandra]

very nice. work well on ionic 7 with vue 3

<script lang="ts">
  import { Device } from '@capacitor/device'
  import { StatusBar, Style } from '@capacitor/status-bar'

  export default {
    beforeRouteEnter: function (to, from, next) {
      Device.getInfo().then((info) => {
        if (info.platform === 'android') {
          StatusBar.setStyle({ style: Style.Dark }).then(() => {
            next()
          })
        } else {
          next()
        }
      })
    },
  }
</script>
<script setup lang="ts">
...
</script>

[patie]

any news on this please? 🙏

[AlamTheInnov]

<script>
  import { reactive, toRefs } from 'vue';
  
  export default {
    name: 'ComponentName',
    beforeRouteEnter(to, from, next){
        next(vm => {
            vm.user.email = to.params.email
        });
    },
    setup() {
        const state = reactive({
            user: {
                email: '',
            },
        });
        
        return {
          ...toRefs(state),
        }
    }
  }
</script>

[luxi78]

Referring to @pau-santesmasses 's answer, the typescript way should be:

<script lang="ts">
import { defineComponent, ComponentPublicInstance } from 'vue'

interface IInstance extends ComponentPublicInstance {
  setPathFrom(from: string): void
}

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      const instance = vm as IInstance
      instance.setPathFrom(from.path)
    })
  },
})
</script>

<script lang="ts" setup>
let pathFrom: string
const setPathFrom = (path: string) => {
  pathFrom = path
  console.log('vue-route::from::', pathFrom)
}

defineExpose({ setPathFrom })
</script>

[jllavec]

I was going to post kind of question / bug because i wasn´t able to access refs defined on script setup SFC on next callback vm instance and defineExpose saved my life.

I thought that like in template, those variables would be accesible in next callback vm. But they aren´t 😄

[dessskris]

I need to call setPathFrom before next, is there a way to get vm outside of that?

[nbransby]

I believe the issue with this is pathFrom is undefined when the template is being evaluated

[Gilson401]

For me this only works if use inside a view and not in component:
Should it works in component too?
beforeRouteEnter(to, from, next) {
next((vm) => {
console.log("onBeforeRouteUpdate", { to, from, vm });
});
},

[Germxu]

Thanks all.

[awudarowicz]

Instead of using beforeRouteEnter you can use watch to detect changes in route params:

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
let id = ref(0);

watch(() => route.params.id, (newId, oldId) => {
  id.value = newId ? parseInt(newId) : 0;
});
</script>

docs: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

[domints]

It doesn't work when I directly navigate into that view, not through Vue's navigation, e.g. I enter https://example.app/component/1 when my route was /component/:id.

[tarkhil]

It doesn't work when I directly navigate into that view, not through Vue's navigation, e.g. I enter https://example.app/component/1 when my route was /component/:id.

... I hoped to overcome that exact problem

[domints]

I resolved it by essentially wrapping router component in suspense (to make
it work with the bodge that is coming).
Then there are two pieces that can possibly load data, and do the same
thing. One is straight in the setup block, that is executed only when
component is being loaded, second one is in the route change event handler,
which is executed only when route params (thus there’s need to reload data)
change.
It really feels like a bodge, one would think that there would be a
solution in more or less matured framework/library as vue, for such basic
need, but well. If you need more specific code example I can provide them
when I’m back home.

[tarkhil]

I resolved it by essentially wrapping router component in suspense (to make it work with the bodge that is coming). Then there are two pieces that can possibly load data, and do the same thing. One is straight in the setup block, that is executed only when component is being loaded, second one is in the route change event handler, which is executed only when route params (thus there’s need to reload data) change.

It would be nice to write a vue 3 plugin with new event, something like onComponentActivate, to run exactly once each time component is going to be rendered. More important, child should get this event after parent. But I surely won't do it soon (

[domints]

I have no clue how to achieve it tbh. I'd expect something like "onAfterComponentRenderedOrRouteChanged" :D Maybe this would also avoid needing the Suspense and make handling the loader animation easier, since now I don't have idea on how to do it, except for implementing one loader in suspense and one loader in every component that might load something, which is just dumb tbh

[Timibadass]

Hi @posva, is there an update on how to do this yet? I'll appreciate any help on this.

[posva]

#302 (reply in thread)

[posva]

Closing in favor of #460 because of the points mentioned in comments above.