Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion examples/route-props/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,27 @@ function dynamicPropsFn (route) {
}
}

const Child = {
name: 'child',
props: { name: { default: 'name' }},
template: `<div><h2 class="hello">Hello {{ name }}</h2></div>`
}

const Parent = {
name: 'parent',
components: { Child },
template: `<child v-bind="$attrs"></child>`
}

const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ 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' }}
]
})

Expand All @@ -32,6 +45,7 @@ new Vue({
<li><router-link to="/hello/you">/hello/you</router-link></li>
<li><router-link to="/static">/static</router-link></li>
<li><router-link to="/dynamic/1">/dynamic/1</router-link></li>
<li><router-link to="/attrs">/attrs</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
Expand Down
8 changes: 8 additions & 0 deletions src/components/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down
6 changes: 5 additions & 1 deletion test/e2e/specs/route-props.js
Original file line number Diff line number Diff line change
Expand Up @@ -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!')
Expand All @@ -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()
}
}