Skip to content

Commit 2eb95c5

Browse files
committed
example + test for beforeRouteUpdate
1 parent cc2b322 commit 2eb95c5

File tree

3 files changed

+35
-3
lines changed

3 files changed

+35
-3
lines changed

examples/navigation-guards/app.js

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,22 @@ const Qux = {
7171
}
7272
}
7373

74+
// Quux implements an in-component beforeRouteUpdate hook.
75+
// this hook is called when the component is reused, but the route is updated.
76+
// For example, when navigating from /quux/1 to /quux/2.
77+
const Quux = {
78+
data () {
79+
return {
80+
prevId: 0
81+
}
82+
},
83+
template: `<div>id:{{ $route.params.id }} prevId:{{ prevId }}</div>`,
84+
beforeRouteUpdate (to, from, next) {
85+
this.prevId = from.params.id
86+
next()
87+
}
88+
}
89+
7490
const router = new VueRouter({
7591
mode: 'history',
7692
base: __dirname,
@@ -95,7 +111,10 @@ const router = new VueRouter({
95111
setTimeout(() => {
96112
resolve(Qux)
97113
}, 0)
98-
} }
114+
} },
115+
116+
// in-component beforeRouteUpdate hook
117+
{ path: '/quux/:id', component: Quux }
99118
]
100119
})
101120

@@ -119,6 +138,8 @@ new Vue({
119138
<li><router-link to="/baz">/baz</router-link></li>
120139
<li><router-link to="/qux">/qux</router-link></li>
121140
<li><router-link to="/qux-async">/qux-async</router-link></li>
141+
<li><router-link to="/quux/1">/quux/1</router-link></li>
142+
<li><router-link to="/quux/2">/quux/2</router-link></li>
122143
</ul>
123144
<router-view class="view"></router-view>
124145
</div>

test/e2e/runner.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ if (args.indexOf('--env') === -1) {
1414
}
1515
var i = args.indexOf('--test')
1616
if (i > -1) {
17-
args[i + 1] = 'test/e2e/specs/' + args[i + 1]
17+
args[i + 1] = 'test/e2e/specs/' + args[i + 1].replace(/\.js$/, '') + '.js'
1818
}
1919
if (args.indexOf('phantomjs') > -1) {
2020
process.env.PHANTOMJS = true

test/e2e/specs/navigation-guards.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = {
88
browser
99
.url('http://localhost:8080/navigation-guards/')
1010
.waitForElementVisible('#app', 1000)
11-
.assert.count('li a', 6)
11+
.assert.count('li a', 8)
1212
.assert.containsText('.view', 'home')
1313

1414
.click('li:nth-child(2) a')
@@ -119,6 +119,17 @@ module.exports = {
119119
.waitFor(300)
120120
.assert.urlEquals('http://localhost:8080/navigation-guards/qux-async')
121121
.assert.containsText('.view', 'Qux')
122+
123+
// beforeRouteUpdate
124+
.click('li:nth-child(7) a')
125+
.assert.urlEquals('http://localhost:8080/navigation-guards/quux/1')
126+
.assert.containsText('.view', 'id:1 prevId:0')
127+
.click('li:nth-child(8) a')
128+
.assert.urlEquals('http://localhost:8080/navigation-guards/quux/2')
129+
.assert.containsText('.view', 'id:2 prevId:1')
130+
.click('li:nth-child(7) a')
131+
.assert.urlEquals('http://localhost:8080/navigation-guards/quux/1')
132+
.assert.containsText('.view', 'id:1 prevId:2')
122133
.end()
123134
}
124135
}

0 commit comments

Comments
 (0)