Hi,

I am in the same boat. I needed onBeforeRouteLeave for a “Unsaved changes” popup. I found a fix here.
https://github.com/vuejs/composition-api/issues/49#issuecomment-701015268

I think the vue-router version that provides these composition api functions requires Vue3. I also think support for Quasar and Vue3 is currently in development. I might be wrong I don’t know for sure, but figured I would post the fix that worked for me while looking into this issue.

Thanks,
Mitch

Hey! Im having the same problem, but I would like to know why I cannot just import Router inside actions.ts and use it as I usually did on Javascript files.

I know that it is something related to the router Quasar wrapper and I am getting really stuck on understanding why is this happening.

Thank you.

I got it working using events and wrapping <q-side-link> to emit an event when exactActiveClass is present.

<!-- link.group is a unique string --> <q-collapsible :ref="link.group" v-if="link.isCollapsible" v-bind="link"> <sidebar-navigation-item item exact v-for="sublink in link.sublinks" v-bind="sublink" :parent-ref="link.group" @active="openActiveCollapsible" /> </q-collapsible> ... methods: { openActiveCollapsible(ref) { this.$refs[ref][0].open() } } // in <sidebar-navigation-item> mounted() { if (this.$el.classList.contains(this.exactActiveClass)) { this.$emit('active', this.parentRef); } }

Has webpack changed the way it loads? I am dropping the ajax bar in and I see it run with hotmodule reloads, but not routes. In the network tab on devtools It looks like the type for the chucks is script and not xhr. It can be setup to run with the before and after route guards easily but I did see some occasional console errors about cant call start on undefined. ( can check for it, just didn’t expect the ref to not exist on occasion ) Thoughts? I kinda want to do a semitransparent bar across where my content would appear similar ( but smaller ) to what I see on dashradio, so may not go this route anyway, but I thought I’d post what I am seeing.