javascript - 为什么 Vue Router (0.7.13) 不匹配子路由？

Question

如果我这样做：

'/sales': {
    component: NotFound,
    subRoutes: {
      '/': {
        component: NotFound
      },
      '/report': {
        name: 'sales.report',
        component: SalesReport
      },
      '/create': {
        name: 'sales.create',
        component: SalesCreate
      },
      '/edit/:i': {
        name: 'sales.edit',
        component: SalesEdit
      },
      '/list': {
        name: 'sales.list',
        component: SalesList
      }
    }
  }

NotFound无论URL 是什么， Vue 总是会转到组件sales（我猜它匹配父级）。

但如果我这样写：

'sales/report': {
   name: 'sales.report',
   component: SalesReport
},
'sales/create: {
   name: 'sales.create',
   component: SalesCreate
}

它按预期工作。我的问题：为什么我不能使用subRoutes？（使用 Vue 1.0.26）

Answer 1

按名称调用嵌套路由应该没有问题。

https://jsfiddle.net/662u1pah/4/

// index.html
<div id="app">
  <h1>My App</h1>
  <ul>
    <li><a v-link="{ name: 'sales' }">Go to /sales</a></li>
    <li><a v-link="{ name: 'sales.report' }">Go to /sales/report</a></li>
    <li><a v-link="{ name: 'sales.create' }">Go to /sales/create</a></li>
    <li><a v-link="{ name: 'sales.edit', params: { i: 2 } }">Go to /sales/edit/2</a></li>
    <li><a v-link="{ name: 'sales.list' }">Go to /sales/list</a></li>
  </ul>
  <router-view></router-view>
</div>

// index.js
var Root = Vue.extend({
  template:
    '<div class="root">' +
      '<h2>This is Root. I always show</h2>' +
      '<router-view></router-view>' +
    '</div>'
})

var SalesReport = Vue.extend({
    template: '<p>This is Sales Report</p>'
})

var SalesCreate = Vue.extend({
    template: '<p>This is Sales Create</p>'
})

var SalesEdit = Vue.extend({
    template: '<p>This is Sales Edit ({{ $route.params.i }})</p>'
})

var SalesList = Vue.extend({
    template: '<p>This is Sales List</p>'
})

// configure router
var router = new VueRouter()

router.map({
  '/': {
    component: Root,
  },
  '/sales': {
      name: 'sales',
      component: Root,
      subRoutes: {
        '/report': {
          name: 'sales.report',
          component: SalesReport
        },
        '/create': {
          name: 'sales.create',
          component: SalesCreate
        },
        '/edit/:i': {
          name: 'sales.edit',
          component: SalesEdit
        },
        '/list': {
          name: 'sales.list',
          component: SalesList
        }
      }
    }
})

// start app
var App = Vue.extend({})
router.start(App, '#app')