fix: send props not defined on the route component in $attrs. Fixes #1695. (#1702)

* Added repro test for #1695.

* Send props not defined on the route component in $attrs.
Fixes #1695.

Author: lbogdan

examples/route-props/app.js

@@ -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' }}
   ]
 })
 
@@ -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>

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

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()
   }
 }