user2002495 user2002495 - 2 months ago 22
JSON Question

Why Vue Router (0.7.13) does not match sub routes?

If I make this:

'/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 will always go to component
NotFound
whatever the
sales
URL is (I'm guessing it matched parent).

But if I write it like this:

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


It works as intended. My question: why I can't use the subRoutes? (Using Vue 1.0.26)

Answer

There should be no issues with calling nested routes by name.

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