Switching environments and switching the architecture design scheme of the project

Recently, I encountered such a problem in a project. In our system, there is a concept of a project, and users can create multiple projects. Each project has multiple environments. When a user clicks on the project name, they will enter the project's internal page, and the left menu bar will have a function to switch environments. Each environment contains many resources, such as articles, users, roles, and pipelines.

So after switching the environment of a project, it is required to stay on the current page and obtain the data of the current environment, such as articles, users, roles, etc. The routing is roughly like this:/p/pid/e/eid/jobpid is the project id, and eid is the environment id. When switching environments, only theeidparameter in the current url will be changed.

Initially, my design plan was to update the eid in the routing when switching environments, and then watchroute.params.eidon each page that needs to be refreshed, so as to reload or initialize the page data. This plan has both advantages and disadvantages. The advantage is that each page can perform separate page logic processing after switching environments, and for public data, that is, interface data that does not depend on the environment, there is no need to reload. The disadvantage is that sometimes the workload is relatively large, especially when there are many intermediate variables on the current page.

My colleague's plan is to redirect to an empty page when switching environments, and then perform a redirect on that page. This way, the current page can be reloaded using mounted. This approach requires minimal changes, but since it adds an intermediate redirect component, it can lead to many unexpected situations, such as white screens, routing errors, and the addition of redundant components. Moreover, I think this plan is very low-level. However, since I didn't have a better plan at the time, I adopted this plan first. The workload was not too heavy, and I had time to study other things.

Later, I found a more elegant solution, which is to create a
edirectory. Then, there is only one routerview component in eid.vue to render the specific content in the eid directory. The most important point is to seteiddirectory and aeid.vuedirectory under the:key="route.params.eid"on the routerview component. Because of the different keys, vue will consider them as two different nodes and will re-render.
In this way, as long as the eid in the route changes, the routerview will be re-rendered, leading to the re-rendering of the underlying articles and user components. This is the most elegant solution I have found so far.