beforeRouteEnter guard in vue-router with composition API

[Aferz]

Hello vuers...

This will be sort. Due to beforeRouteEnter guard nature, it is executed before the route that renders the component is confirmed. That's ok.

But as you all may know, this guard offers the possibility of executing a callback once the navigation is resolved via next(vm => ...).

With a mixture of API's, the next snippet achieves what I'm talking about:

<template>
  <div>
    <template v-if="tip">
      {{ tip.prop }}
    </template>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup () {
    const tip = ref(null)

    watch(tip, () => console.log(tip.value, 'Changed'))

    return { tip }
  },

  beforeRouteEnter (to, from, next) {
    setTimeout(() => {
      next(vm => vm.tip = { prop: 'value' })
    }, 2000)
  }
}
</script>

I'm asking because, in the previous iteration of the composition API, Vue team said the options API was going to be deprecated for v3 and removed in v4. Of course, I know it won't, but then I assume Vue team had plans for this guard. Am I right?

In such case... How the API of this guard will look and how I'll be able to reproduce the above snippet?

Thanks!

[Aferz]

Btw... I don't know if I misunderstood ref usage, but in my previous example notice that I did vm.tip = ... and not vm.tip.value = ...

If I try the second option, an error is thrown saying that I'm trying to access value of null. I'm a bit confused here and I think I'm not doing it correctly.

[pikax]

I'm asking because, in the previous iteration of the composition API, Vue team said the options API was going to be deprecated for v3 and removed in v4.

Options API is not going anywhere, there's no plans to deprecate it at all.

ref objects are unwrapped in the vm

[Aferz]

@pikax You didn't read the following sentence, didn't you? ,☹️

[pikax]

@Aferz I did, but that doesn't invalidate my response to your statement.

[Aferz]

@pikax Ok, but that doesn't answer any of my questions.

Just to be clear to everyone that gets to this issue and wants to help me:

• I know about the not deprecation of options API. It just was an argument to enrich my question.
• I know about ref unwrapping in template. That's not the problem.

I'd like to know:

• How the above snippet could be translated in a fully compostable way. (If possible)
• Why if I update the ref directly instead of it's .value, it seems to work. I think I'm doing something wrong here because I think the refs must be updated through its .value property (??)

Thanks.

[pikax]

Why if I update the ref directly instead of it's .value, it seems to work. I think I'm doing something wrong here because I think the refs must be updated through its .value property (??)

response:

ref objects are unwrapped in the vm

[Aferz]

@pikax fair enough. I changed the vm word for template in my mind in your first reply.

Thank you, dude.

[dhanielcodes]

in the docs it stated that, to use the beforeRouteEnter, it has to be in an activated component What does that mean ?

[posva]

Instead of using beforeRouteEnter, using a Data Loader would be the preferred approach now. You can return any data you want rather than changing the component instance which creates coupling and cannot be typed