Skip to content

Commit

Permalink
fix(location): add a copy for params with named locations (#2802)
Browse files Browse the repository at this point in the history
Closes #2800, #2938 

* fix(normalizeLocation): add a copy for params with named locations

* test: add test case for #2938
  • Loading branch information
zrh122 authored and posva committed Sep 23, 2019
1 parent 7f58509 commit 2b39f5a
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 1 deletion.
1 change: 1 addition & 0 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
58 changes: 58 additions & 0 deletions examples/route-params/app.js
Original file line number Diff line number Diff line change
@@ -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')
6 changes: 6 additions & 0 deletions examples/route-params/index.html
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 6 additions & 1 deletion src/util/location.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 26 additions & 0 deletions test/e2e/specs/route-params.js
Original file line number Diff line number Diff line change
@@ -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()
}
}

0 comments on commit 2b39f5a

Please sign in to comment.