Deeply understand Vue-Router routing nested understanding

background

Recently, a beginner Vue friend asked me why my two-layer route can’t jump, and it’s not OK to just lose url? I was not very informative and could not see the source code. I was confused at the time and thought that this must be a problem with the code and had nothing to do with the level. Then I continued to ask... (omitted)... I roughly understood the situation. It turned out that this friend did not understand the principle of Vue-Router nesting. I have sorted out my understanding of Vue-Router routing nesting.

Vue-Router nested routing

First of all, suppose there are two routes in the project, and they are defined as one-layer routes according to the writing method, which are subroutines of Root. Therefore, the router-view component in the Root must bear the subroutines in order to realize the subroutine switching display.

First-layer routing

Root container

 <div>
  <h1>Root</h1>
  <!-- Container that hosts subroutines -->
  <router-view />
 </div>

First-layer routing writing

[
 {
  path: '/profile'
  component: profile // Component references are omitted here },
 {
  path: '/posts'
  component: posts // Component references are omitted here },
]

First-layer routing display

The subroutine display of Root is in Root. Switching the route is actually just switching the contents of the router-view container.

/profile               /posts
+------------------+         +-----------------+
| Root       |         | Root      |
| +--------------+ |         | +-------------+ |
| | Profile   | | +------------> | | Posts    | |
| |       | |         | |       | |
| +--------------+ |         | +-------------+ |
+------------------+         +-----------------+

Layer 2 routing

Based on the above, add a layer of routing to the profile

profile container

 <div>
  <h1>profile</h1>
  <!-- CarryingprofileSubroutine container -->
  <router-view />
 </div>

profile subroutine route

[
 {
  path: '/profile'
  component: profile, // There cannot be no missing here  children: [
   {
    path: '/profile/list',
    component: profileList
   },
   {
    path: '/profile/item',
    component: profileItem
   }
  ]
 },
 ...
]

Layer 2 routing display

The same as the first-layer routing is that the subroutine of the Profile is displayed in the Profile container, so the component of the Profile routing is essential.

/profile/list             /profile/item
+------------------+         +-----------------+
| Root       |         | Root      |
| +--------------+ |         | +-------------+ |
| | Profile   | | +------------> | | Profile   | |
| | +----------+ | |         | | +---------+ | |
| | | list   | | |         | | | item  | | |
| | |     | | |         | | |     | | |
| | +----------+ | |         | | +---------+ | |
| +--------------+ |         | +-------------+ |
+------------------+         +-----------------+

Router nesting summary

Any child route is switched to display in the component of its parent route. No matter how many layers of route nesting are, it is understood in this way. Therefore, the parent route needs to have the following two points, both of which are indispensable.

• Component references
• There is a router-view component in the component

My friend is that the parent route does not reference components, which leads to the child route not hosting containers. Naturally, what he said is ineffective. I will share the experience with you here, hoping it will be helpful to beginners, and I hope everyone will support me more.