在vite vue3 前端架构中，切换环境，切换项目的架构设计方案

最近在项目中遇到了这样一个问题，在我们的系统中，有一个项目的概念，用户可以创建多个项目，每个项目中又有多个环境， 当用户点击项目名称后，会进入一个项目的内页，左侧菜单栏会有切换环境的功能。而每个环境下会有很多资源，如文章，用户，角色，以及流水线。

那么在切换一个项目的环境后，要求停留在当前的页面，并获取当前环境下的文章，用户，角色，等数据。 路由大致是这样 /p/pid/e/eid/job 。pid为项目id，eid为环境id。当切换环境后，只会改变当前url中的eid参数。

一开始我的设计的方案是 在切换环境时，更新路由中的eid，然后在每个需要刷新的页面watch route.params.eid，从而对页面的数据进行重新加载，或初始化。这个方案的有好处也有坏处，好处时，每个页面都可以在切换环境后 做单独的页面逻辑处理，对于公用的数据，即不依赖环境的接口数据，不需要重新加载。坏处是，有时工作量比较大，特别是当前页面中间变量比较多时。

我的同事的方案是，切换环境时，先跳转到一个空的页面，在该页面进行重定向。从而实现当前页面的重新加载 mounted。 这样做改动量很少，但由于新增了一个中间重定向组件，会导致很多意外情况，比如白屏，路由错乱，增加冗余组件。而且我认为这个方案很low。但鉴于当时我没有更好的方案，也就先采取了这个方案。比较工作量不多，剩下的时间来研究其他事情。

后来，我找到了一个更优雅的方案，那就是在 e目录下，创建eid目录以及eid.vue。 然后在eid.vue中只有一个 routerview组件，来渲染eid目录中的具体内容。最最重要的一点是 在routerview组件上 设置 :key="route.params.eid"由于key不同，vue会认为二个不同的节点，会重新渲染。 这样，只要路由中的eid变更后，routerview就会重新渲染，从而 下层的 文章，用户组件重新渲染。这是目前我找到的最优雅的方案。