fix(location): add a copy for params with named locations (#2802)

Closes #2800, #2938 * fix(normalizeLocation): add a copy for params with named locations * test: add test case for #2938
vuejs · Sep 23, 2019 · 2b39f5a · 2b39f5a
1 parent 7f58509
commit 2b39f5a
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 1 deletion.
diff --git a/examples/index.html b/examples/index.html
@@ -17,6 +17,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="redirect">Redirect</a></li>
     <li><a href="route-props">Route Props</a></li>
     <li><a href="route-alias">Route Alias</a></li>
+    <li><a href="route-params">Route Params</a></li>
     <li><a href="transitions">Transitions</a></li>
     <li><a href="data-fetching">Data Fetching</a></li>
     <li><a href="navigation-guards">Navigation Guards</a></li>

diff --git a/examples/route-params/app.js b/examples/route-params/app.js
@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Log = {
+  template: `<div class="log">id: {{ $route.params.id }}, type: {{ $route.params.type }}</div>`
+}
+
+const Logs = {
+  template: `
+    <div>
+      <pre id="params">{{ to.params }}</pre>
+      <router-link :to="to" class="child-link">{{ to.params.type }}</router-link>
+      <router-view></router-view>
+    </div>
+  `,
+  data () {
+    return {
+      to: {
+        name: 'items.logs.type',
+        params: { type: 'info' }
+      }
+    }
+  }
+}
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    {
+      path: '/items/:id/logs',
+      component: Logs,
+      children: [
+        {
+          path: ':type',
+          name: 'items.logs.type',
+          component: Log
+        }
+      ]
+    }
+  ]
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Route params</h1>
+      <ul>
+        <li><router-link to="/items/1/logs">item #1</router-link></li>
+        <li><router-link to="/items/2/logs">item #2</router-link></li>
+      </ul>
+      <router-view class="view"></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/route-params/index.html b/examples/route-params/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/route-params.js"></script>
diff --git a/src/util/location.js b/src/util/location.js
@@ -18,7 +18,12 @@ export function normalizeLocation (
   if (next._normalized) {
     return next
   } else if (next.name) {
-    return extend({}, raw)
+    next = extend({}, raw)
+    const params = next.params
+    if (params && typeof params === 'object') {
+      next.params = extend({}, params)
+    }
+    return next
   }
 
   // relative params

diff --git a/test/e2e/specs/route-params.js b/test/e2e/specs/route-params.js
@@ -0,0 +1,26 @@
+module.exports = {
+  'route-params': function (browser) {
+    browser
+      .url('http://localhost:8080/route-params/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 2)
+
+      // https://github.com/vuejs/vue-router/issues/2800
+      .click('li:nth-child(1) a')
+      .assert.urlEquals('http://localhost:8080/route-params/items/1/logs')
+      .assert.containsText('#params', JSON.stringify({ type: 'info' }, null, 2))
+      .click('.child-link')
+      .assert.urlEquals('http://localhost:8080/route-params/items/1/logs/info')
+      .assert.containsText('.log', 'id: 1, type: info')
+      // https://github.com/vuejs/vue-router/issues/2938
+      .assert.containsText('#params', JSON.stringify({ type: 'info' }, null, 2))
+
+      .click('li:nth-child(2) a')
+      .assert.urlEquals('http://localhost:8080/route-params/items/2/logs')
+      .click('.child-link')
+      .assert.urlEquals('http://localhost:8080/route-params/items/2/logs/info')
+      .assert.containsText('.log', 'id: 2, type: info')
+
+      .end()
+  }
+}