title: Vue Router multiple independent router-view navigation
body: <p>I have multiple blocks of items similar to the books in the jsfiddle below. Each book has a sub-menu and users can click to see a specific book content.</p>
  
  <p>The problem is when users visit book1/summary , all other books will also switch to Summary Component. I don't want that, I want all other books stay at where they are, independently . For example: book1 is showing Summary, book2 is showing Condition, book3 is showing Reservation and each one of them is independent from others.</p>
  
  <p>Can somebody help ? Thanks a lot.</p>
  
  <p><a href="https://jsfiddle.net/trachanh/pL4rmua6/2/" rel="noreferrer">https://jsfiddle.net/trachanh/pL4rmua6/2/</a></p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;router-link to="/"&gt;/home&lt;/router-link&gt;
    &lt;router-link to="/foo"&gt;/foo&lt;/router-link&gt;
    &lt;router-link to="/books"&gt;/books&lt;/router-link&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
  
  &lt;template id="books"&gt;
   &lt;div&gt; 
    &lt;div class="book" v-for="book in books"&gt;
  
    &lt;h3&gt;{{book.title}}&lt;/h3&gt;
        &lt;ul&gt;
            &lt;router-link :to="{ path: '/books/'+book.id+ '/summary'}"&gt;Summary&lt;/router-link&gt;
            &lt;router-link :to="{ path: '/books/'+book.id+ '/location'}"&gt;Location&lt;/router-link&gt;
            &lt;router-link :to="{ path: '/books/'+book.id+ '/condition'}"&gt;Condition&lt;/router-link&gt;
            &lt;router-link :to="{ path: '/books/'+book.id+ '/reservation'}"&gt;Reservation&lt;/router-link&gt;
        &lt;/ul&gt;    
        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  
    const Home = { template: '&lt;div&gt;Home&lt;/div&gt;' }
    const Foo = { template: '&lt;div&gt;Foo&lt;/div&gt;' }
  
    const Books = {
      template: '#books',
      data: function(){
          return {
            books: [
              {id: 1, title: 'Harry Potter'},
              {id: 2, title: 'Twilight'},
              {id: 3, title: 'The Hobbit'}
            ]
          }
      }
    }
  
    const summary = { template: '&lt;div&gt;Summary component&lt;/div&gt;' }
    const location = { template: '&lt;div&gt;Location component&lt;/div&gt;' }
    const condition = { template: '&lt;div&gt;Condition component&lt;/div&gt;' }
    const reservation = { template: '&lt;div&gt;Reservation component&lt;/div&gt;' }
  
    const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/books', component: Books,
          children: [
                  {
                    path: ':bookID/summary',
                    component: summary
                  },
                  {
                    path: ':bookID/location',
                    component: location
                  },
                  {
                    path: ':bookID/condition',
                    component: condition
                  },
                  {
                    path: ':bookID/reservation',
                    component: reservation
                  }
            ]
      }]
    })
  
    new Vue({
      router,
      el: '#app',
      data: {
        msg: 'Hello World'
      }
    })
  </code></pre>