1

私がこれを作るなら：

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

Vue はNotFound、URL が何であれ、常にコンポーネントに移動しsalesます (親と一致したと思います)。

しかし、私が次のように書くと：

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

意図したとおりに機能します。私の質問: subRoutesを使用できないのはなぜですか? (Vue 1.0.26 を使用)

4

1 に答える 1

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')
于 2016-10-01T03:13:59.020 に答える