Vue Router Architecture and Nested Routes | vue router child page
Workingwithnestedroutescanbequiteahassle...ThereforeIdidcomeupwithaconclusiononhowtokeeptheroutingconfigurationcleanandtoeasetheworkingwithnestedroutes.TherearealreadysometutorialsonhowtoworkwithVueRouteringeneral,butIwanttofocusonthisspecificissueandthearchitecturearoundit.IllguideyouthroughthecreationoftheexamplerepobelowandshowyouhowIsolvedthisThemainissueThemainproblemisthatifyouwanttonestroutestheparentroutecomponentneedstoalwayscontaina
Working with nested routes can be quite a hassle...
Therefore I did come up with a conclusion on how to keep the routing configuration clean and to ease the working with nested routes.
There are already some tutorials on how to work with Vue Router in general, but I want to focus on this specific issue and the architecture around it.
Ill guide you through the creation of the example repo below and show you how I solved this
The main issueThe main problem is that if you want to nest routes the parent route component needs to always contain a <router-view></router-view>. This can be quite annoying sometimes and in my opinion it just does not feel right. Also this leads to high coupling between the component itself and its sub-routes / the routing.
Step 1: Add an EmptyRouterView ComponentAt first we create an EmptyRouterView Component, which just contains <router-view></router-view&...