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

2023-08-24 10:26:01 浏览数 (1)

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

那么在切换一个项目的环境后,要求停留在当前的页面,并获取当前环境下的文章,用户,角色,等数据。 路由大致是这样 /p/pid/e/eid/jobpid为项目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就会重新渲染,从而 下层的 文章,用户组件重新渲染。这是目前我找到的最优雅的方案。

0 人点赞