Vue路由器多個獨立的路由器視圖導航

Question

我有多塊項目類似於下面的jsfiddle中的書籍。每本書都有一個子菜單，用戶可以點擊查看特定的書籍內容。

問題是當用戶訪問book1/summary時，所有其他書籍也將切換到Summary Component。我不希望那樣，我希望所有其他書獨立存在於他們所在的位置。例如：book1正在顯示Summary，book2正在顯示Condition，book3正在顯示Reservation，並且每個人都獨立於其他人。

有人可以幫忙嗎？非常感謝。

https://jsfiddle.net/trachanh/pL4rmua6/2/

<div id="app"> 
    <router-link to="/">/home</router-link> 
    <router-link to="/foo">/foo</router-link> 
    <router-link to="/books">/books</router-link> 
    <router-view></router-view> 
</div> 

<template id="books"> 
<div> 
    <div class="book" v-for="book in books"> 

    <h3>{{book.title}}</h3> 
     <ul> 
      <router-link :to="{ path: '/books/'+book.id+ '/summary'}">Summary</router-link> 
      <router-link :to="{ path: '/books/'+book.id+ '/location'}">Location</router-link> 
      <router-link :to="{ path: '/books/'+book.id+ '/condition'}">Condition</router-link> 
      <router-link :to="{ path: '/books/'+book.id+ '/reservation'}">Reservation</router-link> 
     </ul>  
     <router-view></router-view> 
    </div> 
</div> 
</template> 


    const Home = { template: '<div>Home</div>' } 
    const Foo = { template: '<div>Foo</div>' } 

    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: '<div>Summary component</div>' } 
    const location = { template: '<div>Location component</div>' } 
    const condition = { template: '<div>Condition component</div>' } 
    const reservation = { template: '<div>Reservation component</div>' } 

    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' 
    } 
    }) 

Answer 1

你應該能夠使它工作使用子路由，但你需要稍微更改設置。

每本書都需要單獨的導航裏面和<router-view>裏面，然後調用特定書籍內的子路線應該工作。

嘗試參考文檔：https://router.vuejs.org/en/essentials/nested-routes.html