File tree Expand file tree Collapse file tree 3 files changed +35
-3
lines changed
examples/navigation-guards Expand file tree Collapse file tree 3 files changed +35
-3
lines changed Original file line number Diff line number Diff line change @@ -71,6 +71,22 @@ const Qux = {
71
71
}
72
72
}
73
73
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
+
74
90
const router = new VueRouter ( {
75
91
mode : 'history' ,
76
92
base : __dirname ,
@@ -95,7 +111,10 @@ const router = new VueRouter({
95
111
setTimeout ( ( ) => {
96
112
resolve ( Qux )
97
113
} , 0 )
98
- } }
114
+ } } ,
115
+
116
+ // in-component beforeRouteUpdate hook
117
+ { path : '/quux/:id' , component : Quux }
99
118
]
100
119
} )
101
120
@@ -119,6 +138,8 @@ new Vue({
119
138
<li><router-link to="/baz">/baz</router-link></li>
120
139
<li><router-link to="/qux">/qux</router-link></li>
121
140
<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>
122
143
</ul>
123
144
<router-view class="view"></router-view>
124
145
</div>
Original file line number Diff line number Diff line change @@ -14,7 +14,7 @@ if (args.indexOf('--env') === -1) {
14
14
}
15
15
var i = args . indexOf ( '--test' )
16
16
if ( i > - 1 ) {
17
- args [ i + 1 ] = 'test/e2e/specs/' + args [ i + 1 ]
17
+ args [ i + 1 ] = 'test/e2e/specs/' + args [ i + 1 ] . replace ( / \. j s $ / , '' ) + '.js'
18
18
}
19
19
if ( args . indexOf ( 'phantomjs' ) > - 1 ) {
20
20
process . env . PHANTOMJS = true
Original file line number Diff line number Diff line change @@ -8,7 +8,7 @@ module.exports = {
8
8
browser
9
9
. url ( 'http://localhost:8080/navigation-guards/' )
10
10
. waitForElementVisible ( '#app' , 1000 )
11
- . assert . count ( 'li a' , 6 )
11
+ . assert . count ( 'li a' , 8 )
12
12
. assert . containsText ( '.view' , 'home' )
13
13
14
14
. click ( 'li:nth-child(2) a' )
@@ -119,6 +119,17 @@ module.exports = {
119
119
. waitFor ( 300 )
120
120
. assert . urlEquals ( 'http://localhost:8080/navigation-guards/qux-async' )
121
121
. 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' )
122
133
. end ( )
123
134
}
124
135
}
You can’t perform that action at this time.
0 commit comments