Vue-router directly enters the route dynamically loaded by addRoutes, causing the router-view area not to be rendered

vue-router goes directly to the child route, and the parent route has not yet been loaded, resulting in whiteboard

A routing structure like this: 

  https://codepen.io/anon/pen/E...
 when you click / page1, and then click "new win", you will find that the page is not loaded. 


 the preliminary judgment is due to the timing of the dynamic route loading, but the dynamic route can not be loaded until the route has been initialized, and some pages can only be loaded. 


 the current practice is to force location.replace ("/ main") to access the parent route first, and then delay location.replace ("/ page1") to access the child route. I wonder if there is any good way to solve it.
Vue-router vue.js
Jul.15,2022

explain the cause of the problem that your component is not loaded.
when the load route is main or page, the component is not loaded because there are no these two routes at the beginning, no routes are matched, and of course it cannot be loaded. For the unmatched, let's navigate and re-navigate. However, when the re-navigated route still does not match, there will be bug, such as navigating to / other. This route has not appeared from the beginning to the end, and bug will appear. You can judge whether it is a new route, so you can re-navigate, not next (), so as to ensure that there will be no bug
I have made a little change to the beforeEach, as follows, 

 if(!router.routesAdded){
    router.routesAdded = true;
    addRoutes();
  }
  if (to.matched.length === 0) {
    next(to.path);
  } else {
    next();
  }

your page1 path here has a'/ 'slash, which is the root path, which is at the same level as main, so why should it be a subcomponent of it?

this is not a parent-son route. The result should be index.html-sharp/main/page1

first of all, thank you for your reply. The route parent-son relationship of
Vue is not directly related to the hierarchical relationship of path.
I have made an example code. Please see: https://codepen.io/anon/pen/E...
should have nothing to do with father-son nesting. It may be due to the late dynamic loading of routes. But the current solution location.replace is not a good solution, or do you wish there was a more elegant way?

Previous: Thinkphp5 domain name routing does not define array subscript 0

Next: Problems with building components in vue

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b9d722-50a1d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b9d722-50a1d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?