diff --git a/examples/route-props/app.js b/examples/route-props/app.js index d39e682b3..214e85147 100644 --- a/examples/route-props/app.js +++ b/examples/route-props/app.js @@ -11,6 +11,18 @@ function dynamicPropsFn (route) { } } +const Child = { + name: 'child', + props: { name: { default: 'name' }}, + template: `

Hello {{ name }}

` +} + +const Parent = { + name: 'parent', + components: { Child }, + template: `` +} + const router = new VueRouter({ mode: 'history', base: __dirname, @@ -18,7 +30,8 @@ const router = new VueRouter({ { path: '/', component: Hello }, // No props, no nothing { path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props { path: '/static', component: Hello, props: { name: 'world' }}, // static values - { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn } // custom logic for mapping between route and props + { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props + { path: '/attrs', component: Parent, props: { name: 'attrs' }} ] }) @@ -32,6 +45,7 @@ new Vue({
  • /hello/you
  • /static
  • /dynamic/1
  • +
  • /attrs
  • diff --git a/src/components/view.js b/src/components/view.js index 3a30adb10..fe134aaab 100644 --- a/src/components/view.js +++ b/src/components/view.js @@ -69,6 +69,14 @@ export default { // resolve props data.props = resolveProps(route, matched.props && matched.props[name]) + data.attrs = {} + + for (const key in data.props) { + if (!('props' in component) || !(key in component.props)) { + data.attrs[key] = data.props[key] + delete data.props[key] + } + } return h(component, data, children) } diff --git a/test/e2e/specs/route-props.js b/test/e2e/specs/route-props.js index 7327be96e..77d35d0ea 100644 --- a/test/e2e/specs/route-props.js +++ b/test/e2e/specs/route-props.js @@ -3,7 +3,7 @@ module.exports = { browser .url('http://localhost:8080/route-props/') .waitForElementVisible('#app', 1000) - .assert.count('li a', 4) + .assert.count('li a', 5) .assert.urlEquals('http://localhost:8080/route-props/') .assert.containsText('.hello', 'Hello Vue!') @@ -20,6 +20,10 @@ module.exports = { .assert.urlEquals('http://localhost:8080/route-props/dynamic/1') .assert.containsText('.hello', 'Hello ' + ((new Date()).getFullYear() + 1)+ '!') + .click('li:nth-child(5) a') + .assert.urlEquals('http://localhost:8080/route-props/attrs') + .assert.containsText('.hello', 'Hello attrs') + .end() } }