Skip to content

Commit c69ff7b

Browse files
author
Volodymyr Makukha
authored
feat(history): Reset history.current when all apps are destroyed (#3298)
* feat(history): Reset history.current when all apps are destroyed * test(history): adding restart-app test * refactor: split History.teardown method * refactor: general History.teardown method
1 parent af6e7a0 commit c69ff7b

File tree

6 files changed

+142
-6
lines changed

6 files changed

+142
-6
lines changed

‎examples/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ <h1>Vue Router Examples</h1>
2929
<li><a href="nested-router">Nested Routers</a></li>
3030
<li><a href="keepalive-view">Keepalive View</a></li>
3131
<li><a href="multi-app">Multiple Apps</a></li>
32+
<li><a href="restart-app">Restart App</a></li>
3233
</ul>
3334
</body>
3435
</html>

‎examples/restart-app/app.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import Vue from 'vue'
2+
import VueRouter from 'vue-router'
3+
4+
const Home = { template: '<div>home</div>' }
5+
const Foo = { template: '<div>foo</div>' }
6+
7+
const routes = [
8+
{ path: '/', component: Home },
9+
{ path: '/foo', component: Foo }
10+
]
11+
12+
const router = new VueRouter({
13+
mode: 'history',
14+
base: __dirname,
15+
routes
16+
})
17+
18+
// track number of beforeResolve
19+
const increment = name => {
20+
const counter = document.getElementById(name)
21+
counter.innerHTML++
22+
}
23+
24+
document.getElementById('beforeEach').innerHTML = 0
25+
router.beforeEach((to, from, next) => {
26+
increment('beforeEach')
27+
next()
28+
})
29+
30+
document.getElementById('beforeResolve').innerHTML = 0
31+
router.beforeResolve((to, from, next) => {
32+
increment('beforeResolve')
33+
next()
34+
})
35+
36+
document.getElementById('afterEach').innerHTML = 0
37+
router.afterEach((to, from) => {
38+
increment('afterEach')
39+
})
40+
41+
Vue.use(VueRouter)
42+
43+
let vueInstance
44+
const mountEl = document.getElementById('mount')
45+
const unmountEl = document.getElementById('unmount')
46+
47+
mountEl.addEventListener('click', () => {
48+
vueInstance = new Vue({
49+
router,
50+
template: `
51+
<div id="app">
52+
<h1>Hello "Restart-app"</h1>
53+
<ul>
54+
<li><router-link to="/">Go to Home</router-link></li>
55+
<li><router-link to="/foo">Go to Foo</router-link></li>
56+
</ul>
57+
<router-view id="view"></router-view>
58+
</div>
59+
`
60+
}).$mount('#app')
61+
})
62+
63+
unmountEl.addEventListener('click', () => {
64+
vueInstance.$destroy()
65+
vueInstance.$el.innerHTML = ''
66+
})

‎examples/restart-app/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<link rel="stylesheet" href="/global.css">
3+
<a href="/">&larr; Examples index</a>
4+
5+
<hr />
6+
7+
<button id="mount">mount</button>
8+
<button id="unmount">unmount</button>
9+
10+
<hr />
11+
12+
Count beforeEach: <span id="beforeEach"></span><br />
13+
Count beforeResolve: <span id="beforeResolve"></span><br />
14+
Count afterEach: <span id="afterEach"></span><br />
15+
16+
<hr />
17+
18+
<div id="app"></div>
19+
20+
<script src="/__build__/shared.chunk.js"></script>
21+
<script src="/__build__/restart-app.js"></script>

‎src/history/base.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -252,11 +252,18 @@ export class History {
252252
// Default implementation is empty
253253
}
254254

255-
teardownListeners () {
255+
teardown () {
256+
// clean up event listeners
257+
// https://github.com/vuejs/vue-router/issues/2341
256258
this.listeners.forEach(cleanupListener => {
257259
cleanupListener()
258260
})
259261
this.listeners = []
262+
263+
// reset current history route
264+
// https://github.com/vuejs/vue-router/issues/3294
265+
this.current = START
266+
this.pending = null
260267
}
261268
}
262269

‎src/index.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -102,11 +102,7 @@ export default class VueRouter {
102102
// we do not release the router so it can be reused
103103
if (this.app === app) this.app = this.apps[0] || null
104104

105-
if (!this.app) {
106-
// clean up event listeners
107-
// https://github.com/vuejs/vue-router/issues/2341
108-
this.history.teardownListeners()
109-
}
105+
if (!this.app) this.history.teardown()
110106
})
111107

112108
// main app previously initialized

‎test/e2e/specs/restart-app.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const bsStatus = require('../browserstack-send-status')
2+
3+
module.exports = {
4+
...bsStatus(),
5+
6+
'@tags': ['history'],
7+
8+
basic: function (browser) {
9+
browser
10+
.url('http://localhost:8080/restart-app/')
11+
.waitForElementVisible('#mount', 1000)
12+
.assert.containsText('#beforeEach', '0')
13+
.assert.containsText('#beforeResolve', '0')
14+
.assert.containsText('#afterEach', '0')
15+
16+
// Mounting will trigger hooks
17+
.click('#mount')
18+
.waitForElementVisible('#app > *', 1000)
19+
.assert.containsText('#beforeEach', '1')
20+
.assert.containsText('#beforeResolve', '1')
21+
.assert.containsText('#afterEach', '1')
22+
.assert.containsText('#view', 'home')
23+
24+
// Navigate to foo route will trigger hooks
25+
.click('#app li:nth-child(2) a')
26+
.assert.containsText('#beforeEach', '2')
27+
.assert.containsText('#beforeResolve', '2')
28+
.assert.containsText('#afterEach', '2')
29+
.assert.containsText('#view', 'foo')
30+
31+
// Unmount
32+
.click('#unmount')
33+
.assert.containsText('#app', '')
34+
35+
// Second mounting will trigger hooks
36+
.click('#mount')
37+
.waitForElementVisible('#app > *', 1000)
38+
.assert.containsText('#beforeEach', '3')
39+
.assert.containsText('#beforeResolve', '3')
40+
.assert.containsText('#afterEach', '3')
41+
.assert.containsText('#view', 'foo')
42+
43+
.end()
44+
}
45+
}

0 commit comments

Comments
 (0)