Vue Router 多个独立的路由视图导航答案

【问题标题】：Vue Router multiple independent router-view navigationVue Router 多个独立的路由视图导航
【发布时间】：2017-03-09 21:27:21
【问题描述】：

我有多个类似于下面 jsfiddle 中的书籍的项目块。每本书都有一个子菜单，用户可以点击查看具体的书籍内容。

问题是当用户访问 book1/summary 时，所有其他书籍也会切换到摘要组件。我不希望这样，我希望所有其他书籍都独立地留在它们所在的位置。例如：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'
    }
  })

【问题讨论】：

子路径不如平行视图。我同意可以有这样的功能。

标签： navigation vue.js vue-router

【解决方案1】：

您应该能够使用 CHILD ROUTES 使其正常工作，但您需要稍微更改设置。

每本书都需要单独的导航和<router-view>，然后在特定的书中调用子路由应该可以工作。

尝试参考文档：https://router.vuejs.org/en/essentials/nested-routes.html

【讨论】：