Access router in a directive?

[cadilhac]

Is it possible to access the router from inside a mounted hook in a custom directive?

[Alfred-Skyblue]

import { createApp } from 'vue'
import { useRoute } from 'vue-router'
const app = createApp({})

app.directive('focus', {
  mounted(el) {
    const route = useRoute()

    console.log(route)
  }
})

[cadilhac]

Unfortunately, route or router is undefined with your code. I read that useRouter can only be called from setup in a component.

[cadilhac]

I solved it by adding this in my directive file:

import router from '../router'

This is the file where createRouter is called. And then router is directly usable in the directive.
Doesn't seem very elegant... Is there another way?

[Alfred-Skyblue]

I'm sorry, I forgot that useRoute can only be used within components. Currently, you can only use router.currentRoute to access it.

[maxkopych]

Not sure how bad practice it is. But I'm passing router as param to directive v-scroll-top-on-route-change="$router"

import {watch} from "vue";
import {DirectiveBinding} from "vue";
import {Router} from "vue-router";

type HTMLElementWithUnwatcher = HTMLElement & {
    vScrollTopOnRouteChangeUnwatcher?: () => void
}

const vScrollTopOnRouteChange = {
    mounted(el: HTMLElementWithUnwatcher , binding: DirectiveBinding<Router>) {
        if (!binding.value?.currentRoute.value.path) {
            throw new Error("vScrollTopOnRouteChange: router object required");
        }
        el.vScrollTopOnRouteChangeUnwatcher = watch(
            () => binding.value.currentRoute.value.path,
            () => {
                el.scroll({top: 0, behavior: "smooth"});
            }
        );
    },
    beforeUnmount(el: HTMLElementWithUnwatcher ) {
        el.vScrollTopOnRouteChangeUnwatcher?.();
    }
};

export default vScrollTopOnRouteChange

This way directive become more reusable between apps if you have monorepo