Nested routing (very important)

Nested routing

Match between routing and nesting nested components is a very common requirement, use vue-router can simply accomplish this.

Suppose we have an application as follows:

<div id="app">
  <router-view></router-view> </div>

<router-view> It is a top of the chain. It will render component and a matching top-level routing:

Router. Map ({
   '/ foo ' : { // matching routing to / foo, Foo will render a component Component : Foo}})

Similarly, the internal components may contain its own chain, nested  <router-view> . For example, if the component we  Foo added a template:

var Foo = {
  template:
    '<div class="foo">' + '<h2>This is Foo!</h2>' + '<router-view></router-view>' + // <- 嵌套的外链 '</div>' }

In order to render the respective components in the nested outer chain, we need to update our routing configurations:

Router. Map ({
   '/ foo ' : {Component : Foo, // in / foo at a sub-set route subRoutes : { '/ bar ' : { // when mated to / foo / bar, will Foo's <router -view> the rendering // Bar a component component : Bar}, '/ baz ' : { // baz is the same, except that the matching route would be / foo / baz component : baz}}}})

Using the above configuration, when the access  /foo time, Foo outside the chain does not render anything, because the configuration does not match the address of any sub-routes. You might want to render something, then you can set up a sub-route matches  / :

Router. Map ({
   '/ foo ' : {Component : Foo, subRoutes : { '/ ' : { . @ When the match / foo, the assembly is rendered to <router-view> Foo assembly // for simplicity, as used herein, the definition of a component assembly : {Template : '<P> for the Default View sub Foo </ P> '}}, // the other sub-route}}})