Allow pausing listeners at the history level

[beiifeng]

What problem does this feature solve?

Some time, we watn remove history listener manaul.

For example, in qiankun micro-front. Main-app and sub-app both vue, and beforeRoute guard with main-app. I passed the history and router of the main-app to the sub-app. The sub-app used the history of the main-app, and created the router itself, which caused the route guard in the main-app to fire twice

Example:
https://github.com/beiifeng/vue-router-next-report
Followe readme , from 首页 to Home, then to 首页，we find BasicLayout:afterEach /Home once in console. But find BasicLayout:afterEach twice after we switch to PppDemo1 . Sys2Demo1 and Sys2Demo2 is used api I want, only print once.

It's my commit: https://github.com/beiifeng/vue-router-next/commit/b4cbbd0b80e3713aca45cb8cfa294b037aaa679c

What does the proposed API look like?

router = createRouter({
  history,
  routes,
});

router.removeHistoryListener();

[beiifeng]

Cant we expose setupListeners too..

[posva]

The sub app will automatically call removeListeners() when unmounted: https://github.com/vuejs/vue-router-next/blob/master/src/router.ts#L1214

The reproduction is huge, can you remove all unnecessary packages? At the very least everything related to linting, formatting, CSS (you have both less and sass in there), TypeScript, and not having a mono repo would be better as well

We could expose removeHistoryListeners() or rather a destroy() method on the router like its history has but I want to make sure this is necessary

[beiifeng]

I remove unuse file, and push it.

https://github.com/beiifeng/vue-router-next-report/blob/main/README.md

It maybe here https://github.com/single-spa/single-spa/blob/master/src/navigation/navigation-events.js#L105

[beiifeng]

It looks like single-spa's error single-spa/single-spa#911

One way to resolve this error is expose history-listener api to let developers control listener manualy.
I want to know is this necessary too.

[yiliang114]

It is a feature of single-spa, that it will fires PopStateEvent events when it wants to instruct all active applications to re-render. #1423

[posva]

@beiifeng I still need you to remove all the dependencies I mentioned plus anything external or not necessary before I can take a look (e.g. no vue-class-component, qiankun, no babel, etc,) https://github.com/beiifeng/vue-router-next-report/blob/main/packages/main/package.json

[yiliang114]

@posva hi posva, I try to simplify this reproduction, I remove many unnecessary dependencies but except qiankun. Because guard hook has called twice only in subApp of qiankun, the main reason is popState event will be triggered in single-spa ( dependency of qiankun) when router has changed.

You can see this repo, also you can see in codesandbox.

one more thing, I have seen someone said it will behave normally if he use vue-router@3.x in qiankun, and i will try again with 3.x.

[posva]

hmm, still not clear what is the best direction here. So far, I think adding a new active property to the history should be enough. That way, qiankun can paus the history instance when necessary:

const history = createWebHistory()
const router = createRouter({ history })
history.active // true
history.active = false // will not trigger navigations in router

Then create a different history instance on the sub app

[beiifeng]

hmm, still not clear what is the best direction here. So far, I think adding a new listening property to the history should be enough. That way, qiankun can paus the history instance when necessary:

const history = createWebHistory()
const router = createRouter({ history })
history.active // true
history.active = false // will not trigger navigations in router

Then create a different history instance on the sub app

I mean, history listening popstate event, and router.push call window.history.pushState finally, that's ok.

But, qiankun(actually was single-spa) listen popstate event and dispatch one popstate event.

So, the flow was 1.router.push(vue-router) -> 2.window.history.pushState(vue-router) -> 3.triggerAfterEach(vue-router) -> 4.listen and redispatch PopStateEvent(single-spa) -> 5.listen popstateEvent(vue-router) -> 6.triggerAfterEach(vue-router).

If we can stop 5 manual, its easy solve the problem.

[posva]

Sounds good then. Even though single-spa duplicating popstate events is rather a bug (if it really is duplicating them)

[yiliang114]

Can we check whether the origin (I mean add some private property to the first param of pushState) of popState Event is from vue-router itself? Finally the private property will use to judge vue-router should response in popState listener callbacks , and then the property will be ignored or deleted .

[posva]

I don't think that's a good idea because it would just be a hack to specifically support single-spa which seems to already be doing something hacky

Isn't pausing history listeners enough?