Vue dynamic routing problem

figure 1 below. Under normal configuration, routes are switched side by side. They are all contained in a fixed head and sidebar under a first-level route. What is needed has been achieved.
now in order to refresh and get the id, passed into the page, when entering the createInsurance, the id is passed in through dynamic binding to the route. The configuration is shown in figure 2. Figure 3 shows that the binding has been successful.
but now there is a problem. When the previous peer routes are switched, those routes are bound to the location of the id, so that the peer routes cannot be switched properly. I tried to raise the route bound to id to a route one level higher than them, but did not solve ~

ask the great god for advice!

1

2

3

4

Mar.17,2021

the routing path for the sidebar jump is not configured correctly. Although it is not written on your side, it is guessed that the path you configure in the sidebar is' createBefore', only needs to be changed to'/ createBefore', should be able to jump normally.


in the case of not being able to move this layer of routing to a higher level, my final solution is to use the query parameter of the route object to bring the id there. This approach does not affect the original routing configuration in index.js, that is, there is no need for dynamic binding configuration.

can not only achieve page refresh without losing parameters, but also will not affect the previous routing configuration.

see an article on routing refresh on the Internet. Please refer to
http://www.php.cn/js-tutorial.

.

I encountered the same problem, for example, there are three peer routes under / student, which are info/:id, select, class. Click on a dynamic route / student/info/3, and then click on other routes at the same level, such as / student/class,. As a result, the effect that student/info/select, wants is / student/class.. I would like to ask how to solve the problem if dynamic routing is still used.

Menu