Request for Exposing history.setupListeners and history.teardown API in Vue Router

What problem is this solving

我们的项目是基于微前端架构的前端工程，在基座使用 keep-alive + 标签页管理和缓存页面，并且基座可以自由控制和管理微应用注册，切换以及销毁工作，我们允许多个 vue 和 react 等框架开发的应用共存。

我们为每一个接入应用分配一个动态应用容器页，提供挂载的 DOM 节点与交互 APIs。

我之前在 vue2 中的微应用里面，通过监听当前应用容器的生命周期，执行清理方法。

activated 时，调用 history.setupListeners
beforeRouteLeave 时调用 history.teardown

通过与当前应用容器的交互，解决切换到其他应用时的微应用路由重定向到首页或 404 页面的问题。

但 vue3 支持的 router 内部封闭了这2个 API，希望能重新支持，不然我就得 hack 一个 history（现在在这样做）。

感谢 🙏

-------------------------------- From ChatGPT ------------------------------------------------

Our project is a front-end application built on a micro-frontends architecture. In the main portal, we manage and cache pages using keep-alive and tabs. The main portal has the freedom to control and manage the registration, switching, and destruction of micro-applications, allowing multiple applications developed in various frameworks like Vue and React to coexist.

For each integrated micro-application, we allocate a dynamic application container page that provides a mountable DOM node and interaction APIs.

In the past, with Vue 2, I used to manage the micro-application's lifecycle by executing cleanup methods as follows:

When the micro-application is activated, I called history.setupListeners.
When leaving the route (beforeRouteLeave), I called history.teardown.

This interaction with the micro-application container allowed me to address issues related to micro-application route redirection to the homepage or a 404 page when switching to other applications.

However, with Vue 3, the router internally encapsulates these two APIs, and I'm requesting that they be exposed again. Otherwise, I would need to implement a custom history solution (which I'm currently doing).

Thank you for your consideration. 🙏

Proposed solution

We kindly request that the Vue.js team consider adding support for history event listeners and cleanup methods in the Vue Router, similar to the functionality provided by history.setupListeners and history.teardown in Vue 2. This would greatly assist developers in managing complex front-end applications and micro-frontends effectively.

history.setupListeners() // or router. setupListeners()

history.teardown() // or router.teardown()

// or

history.start() history.pause()

Describe alternatives you've considered

hack custom history api

vuejs / router