(Vue 3) singleSpa.navigateToUrl is clashing with vue-router

[jaydgruber]

vue-router seems to be intercepting events after it should have already been destroyed.

It seems like after single-spa tells the vue app to unmount, vue-router is continuing to try and catch routing events. This looks related to https://github.com/vuejs/vue-router/pull/3172, but I am not sure on the dovetail relationship between the vue-router (v3) & vue-router-next (v4) repos.

As far as I can tell, this is an issue with vue-router 4, but not with vue-router 3.

I made an small example repro. To be clear, I don't think this is an issue with having two different versions of Vue loaded on the same page. The work repo where I encountered this issue is using 1 React app & 1 Vue app. I made the repro with two different versions of Vue to illustrate that (Vue 2 / vue-router 3) seems fine, while (Vue 3 / vue-router 4) seems to have a problem.

example repo illustrating the problem

[joeldenning]

I have diagnosed some vue router problems for Vue 3 in other issues, but didn't easily find the links to those issues. The issue you linked to is for Vue 2's router, not vue 3's router. I don't really have a desire to clone and test out the repo right now, but may do so later. Feel free to remind me in a few weeks if I have not done so.

[jaydgruber]

👍 I linked the issue from Vue 2's router because I think the same type of issue may also need to be fixed in Vue 3's router (Remove event listeners when all apps are destroyed).

[gerrue]

@jaydgruber @joeldenning I see that there is some code in the vue-router that is supposed to support multi-apps https://github.com/vuejs/router/blob/8769fa17c1784ff701091d141c1769492e81d7e9/src/router.ts#L1218 do either of you know if this is working?

[eolamisan]

Any luck with this issue?

[jaydgruber]

@eolamisan sorry I never found a fix for this one. My work pivoted our project that was going to use single-spa to instead build an in-house service that sort of resembles Astro Islands.