fix: fix props-passing regression

fix #1800

Author: yyx990803

examples/route-props/Hello.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="hello">Hello {{name}}</h2>
+    <h2 class="hello">Hello {{name}} {{ $attrs }}</h2>
   </div>
 </template>
 
@@ -14,4 +14,4 @@ export default {
     }
   }
 }
-</script>
+</script>

examples/route-props/app.js

@@ -11,18 +11,6 @@ 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,
@@ -31,7 +19,7 @@ const router = new VueRouter({
     { 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: '/attrs', component: Parent, props: { name: 'attrs' }}
+    { path: '/attrs', component: Hello, props: { name: 'attrs' }}
   ]
 })
 
@@ -47,7 +35,7 @@ new Vue({
         <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>
+      <router-view class="view" foo="123"></router-view>
     </div>
   `
 }).$mount('#app')

src/components/view.js

@@ -68,13 +68,17 @@ 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]
+    let propsToPass = data.props = resolveProps(route, matched.props && matched.props[name])
+    if (propsToPass) {
+      // clone to prevent mutation
+      propsToPass = data.props = extend({}, propsToPass)
+      // pass non-declared props as attrs
+      const attrs = data.attrs = data.attrs || {}
+      for (const key in propsToPass) {
+        if (!component.props || !(key in component.props)) {
+          attrs[key] = propsToPass[key]
+          delete propsToPass[key]
+        }
       }
     }
 
@@ -102,3 +106,10 @@ function resolveProps (route, config) {
       }
   }
 }
+
+function extend (to, from) {
+  for (const key in from) {
+    to[key] = from[key]
+  }
+  return to
+}

test/e2e/specs/route-props.js

@@ -1,3 +1,5 @@
+const $attrs = ' { "foo": "123" }'
+
 module.exports = {
   'route-props': function (browser) {
     browser
@@ -6,23 +8,29 @@ module.exports = {
       .assert.count('li a', 5)
 
       .assert.urlEquals('http://localhost:8080/route-props/')
-      .assert.containsText('.hello', 'Hello Vue!')
+      .assert.containsText('.hello', 'Hello Vue!' + $attrs)
 
       .click('li:nth-child(2) a')
       .assert.urlEquals('http://localhost:8080/route-props/hello/you')
-      .assert.containsText('.hello', 'Hello you')
+      .assert.containsText('.hello', 'Hello you' + $attrs)
 
       .click('li:nth-child(3) a')
       .assert.urlEquals('http://localhost:8080/route-props/static')
-      .assert.containsText('.hello', 'Hello world')
+      .assert.containsText('.hello', 'Hello world' + $attrs)
 
       .click('li:nth-child(4) a')
       .assert.urlEquals('http://localhost:8080/route-props/dynamic/1')
-      .assert.containsText('.hello', 'Hello ' + ((new Date()).getFullYear() + 1)+ '!')
+      .assert.containsText('.hello', 'Hello ' + ((new Date()).getFullYear() + 1)+ '!' + $attrs)
 
       .click('li:nth-child(5) a')
       .assert.urlEquals('http://localhost:8080/route-props/attrs')
-      .assert.containsText('.hello', 'Hello attrs')
+      .assert.containsText('.hello', 'Hello attrs' + $attrs)
+
+      // should be consistent
+      .click('li:nth-child(4) a')
+      .click('li:nth-child(5) a')
+      .assert.urlEquals('http://localhost:8080/route-props/attrs')
+      .assert.containsText('.hello', 'Hello attrs' + $attrs)
 
       .end()
   }