fix(normalizeLocation): create a copy with named locations (#2286)

* fix(normalizeLocation): create a copy with non normalized named locations

Fix #2121

* test(nested-routes): add e2e test for implicit params

* chore(lint): fix

Author: posva

examples/nested-routes/app.js

@@ -36,15 +36,22 @@ const Quy = {
     </div>
   `
 }
-const Quux = { template: '<div>quux</div>' }
-const Zap = { template: '<div><h3>zap</h3><pre>{{ $route.params.zapId }}</pre></div>' }
+const Quux = {
+  template: `<div>quux<router-link :to="{ name: 'quuy' }">go to quuy</router-link></div>`
+}
+const Quuy = { template: '<div>quuy</div>' }
+const Zap = {
+  template: '<div><h3>zap</h3><pre>{{ $route.params.zapId }}</pre></div>'
+}
 
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
   routes: [
     { path: '/', redirect: '/parent' },
-    { path: '/parent', component: Parent,
+    {
+      path: '/parent',
+      component: Parent,
       children: [
         // an empty path will be treated as the default, e.g.
         // components rendered at /parent: Root -> Parent -> Default
@@ -65,7 +72,10 @@ const router = new VueRouter({
         {
           path: 'qux/:quxId',
           component: Qux,
-          children: [{ path: 'quux', name: 'quux', component: Quux }]
+          children: [
+            { path: 'quux', name: 'quux', component: Quux },
+            { path: 'quuy', name: 'quuy', component: Quuy }
+          ]
         },
 
         { path: 'quy/:quyId', component: Quy },
@@ -91,6 +101,8 @@ new Vue({
         <li><router-link :to="{name: 'zap'}">/parent/zap</router-link></li>
         <li><router-link :to="{name: 'zap', params: {zapId: 1}}">/parent/zap/1</router-link></li>
         <li><router-link :to="{ params: { zapId: 2 }}">{ params: { zapId: 2 }} (relative params)</router-link></li>
+        <li><router-link to="/parent/qux/1/quux">/parent/qux/1/quux</router-link></li>
+        <li><router-link to="/parent/qux/2/quux">/parent/qux/2/quux</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/util/location.js

@@ -15,8 +15,10 @@ export function normalizeLocation (
 ): Location {
   let next: Location = typeof raw === 'string' ? { path: raw } : raw
   // named target
-  if (next.name || next._normalized) {
+  if (next._normalized) {
     return next
+  } else if (next.name) {
+    return extend({}, raw)
   }
 
   // relative params

test/e2e/specs/nested-routes.js

@@ -3,7 +3,7 @@ module.exports = {
     browser
       .url('http://localhost:8080/nested-routes/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 9)
+      .assert.count('li a', 11)
       .assert.urlEquals('http://localhost:8080/nested-routes/parent')
       .assert.containsText('.view', 'Parent')
       .assert.containsText('.view', 'default')
@@ -70,6 +70,13 @@ module.exports = {
         return (zapId === '2')
       }, null, 'relative params')
 
+      .click('li:nth-child(10) a')
+      .assert.urlEquals('http://localhost:8080/nested-routes/parent/qux/1/quux')
+      .click('li:nth-child(11) a')
+      .assert.urlEquals('http://localhost:8080/nested-routes/parent/qux/2/quux')
+      .click('.nested-child a')
+      .assert.urlEquals('http://localhost:8080/nested-routes/parent/qux/2/quuy')
+
     // check initial visit
       .url('http://localhost:8080/nested-routes/parent/foo')
       .waitForElementVisible('#app', 1000)

test/unit/specs/location.spec.js

@@ -120,5 +120,14 @@ describe('Location utils', () => {
       const loc2 = normalizeLocation(loc1)
       expect(loc1).toBe(loc2)
     })
+
+    it('creates copies when not normalized', () => {
+      const l1 = { name: 'foo' }
+      expect(normalizeLocation(l1)).not.toBe(l1)
+      const l2 = { path: '/foo' }
+      expect(normalizeLocation(l2)).not.toBe(l2)
+      const l3 = { path: '/foo', query: { foo: 'foo' }}
+      expect(normalizeLocation(l3)).not.toBe(l3)
+    })
   })
 })