Accessing refs (and props) in navigation guards in a typesafe way

[sseeland]

As far as I know, the only way to define navigation guards is via the "old way", with the options syntax. However, in my navigation guard I need to access my refs in order to save some data. Unfortunately, since $refs is gone (or will be gone in Vue 3) there is no good way to do that right now.

Here is an example:

<template>
  <div>
    <my-editor ref="myEditor" @input="save"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue-composition-api";
import { Route, NavigationGuardNext } from "vue-router";
import MyEditor from "@/components/myeditor.vue";

export default defineComponent({
  setup() {
    const myEditor = ref<typeof MyEditor>(); // this is assigned correctly on mounting
    return { myEditor };
  },

  beforeRouteLeave(_to: Route, _from: Route, next: NavigationGuardNext) {
    console.dir(this.$refs.titleEditor); // this prints the correct object but TypeSript throws errors about $refs not being defined
    next();
  },
});
</script>

I know I could extend ComponentOptionWithArrayProps (and probably a few more) to include $refs, but then the refs would still not be typed correctly. Same thing with props, by the way. They exist on this, but there is no typing, so TypeScript will complain, which breaks the build pipeline.

So it would be awesome if there could be hooks similar to onMounted which can be registered from within setup() (where refs and props are available and typed) or if there would be a typesafe way to access refs and props in navigation guards outside of setup().

[antfu]

Sure, this is indeed a good enhancement. But sorry I can't guarantee anything right now. If we do, we will need to follow the API design of vue-router for Vue 3. You can find the RFCs here: https://github.com/vuejs/rfcs/pulls?q=is%3Apr+label%3A3.x+label%3Arouter+

As I can currently focusing on the v1.0 release for this plugin. I may not have time to investigate it right now. If anyone is interested in it, feel free to have a try :)

[sseeland]

#406 fixes this for me. Everything that's exported from Setup is now available on this in the "old" options syntax and so are props (via this.$props). So if I just use navigation guards as usual I can access all my refs, props and functions in a typesafe way.

I guess it would still be nice to have ònBeforeRouteLeave() inside of setup(), but that's now only a matter of style and I agree that this responsibility falls to vue-router or other third-party libraries.

I will leave the issue open, in case you want to keep it around as a reminder for after the 1.0 release, but it would be fine with me to close the issue as my use case is satisfied.

[antfu]

Glad to hear that works for you! The best case would be vue-router itself supports the hooks. I am going to close this issue for now :)