Skip to content

Commit 54fa370

Browse files
rstoenescurstoenescu
committed
NEW HIST
1 parent a78cd9e commit 54fa370

File tree

7 files changed

+317
-121
lines changed

7 files changed

+317
-121
lines changed

‎dev/components/new-layout/a.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="layout-padding bg-yellow">
3+
<div>Page A</div>
4+
5+
<br>
6+
7+
<q-btn @click="$router.push('/back/a')">Go to A</q-btn>
8+
<q-btn @click="$router.push('/back/b')">Go to B</q-btn>
9+
<q-btn @click="$router.push('/back/c')">Go to C</q-btn>
10+
11+
<br><br>
12+
13+
<q-btn @click="$router.replace('/back/a')">Replace Go to A</q-btn>
14+
<q-btn @click="$router.replace('/back/b')">Replace Go to B</q-btn>
15+
<q-btn @click="$router.replace('/back/c')">Replace Go to C</q-btn>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {}
23+
},
24+
created () {
25+
console.log('A created')
26+
},
27+
beforeDestroy () {
28+
console.log('A beforeDestroy')
29+
}
30+
}
31+
</script>

‎dev/components/new-layout/b.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="layout-padding bg-teal-2">
3+
<div>Page B</div>
4+
5+
<br>
6+
7+
<q-btn @click="$router.push('/back/a')">Go to A</q-btn>
8+
<q-btn @click="$router.push('/back/b')">Go to B</q-btn>
9+
<q-btn @click="$router.push('/back/c')">Go to C</q-btn>
10+
11+
<br><br>
12+
13+
<q-btn @click="$router.replace('/back/a')">Replace Go to A</q-btn>
14+
<q-btn @click="$router.replace('/back/b')">Replace Go to B</q-btn>
15+
<q-btn @click="$router.replace('/back/c')">Replace Go to C</q-btn>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {}
23+
},
24+
created () {
25+
console.log('B created')
26+
},
27+
beforeDestroy () {
28+
console.log('B beforeDestroy')
29+
}
30+
}
31+
</script>

‎dev/components/new-layout/c.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="layout-padding bg-grey-4">
3+
<div>Page C</div>
4+
5+
<br>
6+
7+
<q-btn @click="$router.push('/back/a')">Go to A</q-btn>
8+
<q-btn @click="$router.push('/back/b')">Go to B</q-btn>
9+
<q-btn @click="$router.push('/back/c')">Go to C</q-btn>
10+
11+
<br><br>
12+
13+
<q-btn @click="$router.replace('/back/a')">Replace Go to A</q-btn>
14+
<q-btn @click="$router.replace('/back/b')">Replace Go to B</q-btn>
15+
<q-btn @click="$router.replace('/back/c')">Replace Go to C</q-btn>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {}
23+
},
24+
created () {
25+
console.log('C created')
26+
},
27+
beforeDestroy () {
28+
console.log('C beforeDestroy')
29+
}
30+
}
31+
</script>

‎dev/components/new-layout/layout.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<div>
3+
<q-tabs inverted>
4+
<q-route-tab slot="title" to="/back/a" label="A" />
5+
<q-route-tab slot="title" to="/back/b" label="B" />
6+
<q-route-tab slot="title" to="/back/c" label="C" />
7+
</q-tabs>
8+
9+
<div>
10+
{{modals}}
11+
<q-btn @click="add" label="Add" />
12+
<q-btn @click="remove" label="Remove" />
13+
</div>
14+
15+
<br>
16+
17+
<router-view />
18+
</div>
19+
</template>
20+
21+
<script>
22+
export default {
23+
data () {
24+
return {
25+
modals: 0
26+
}
27+
},
28+
methods: {
29+
add () {
30+
console.log('add')
31+
this.modals++
32+
const state = window.history.state || {}
33+
state.modal = this.modals
34+
window.history.replaceState(state, '')
35+
window.history.pushState({hasBack: true}, '')
36+
if (this.modals === 1) {
37+
console.log('add popstate')
38+
window.addEventListener('popstate', this.__popstate)
39+
}
40+
},
41+
remove (next) {
42+
console.log('remove')
43+
if (this.modals) {
44+
this.modals--
45+
window.history.go(-1)
46+
console.log('remove: history back')
47+
if (next) {
48+
console.log('remove: calling next')
49+
next()
50+
}
51+
}
52+
},
53+
__popstate () {
54+
console.log('popstate', window.history.state)
55+
if (window.history.state && window.history.state.modal) {
56+
this.modals--
57+
window.history.state.modal = null
58+
if (this.modals === 0) {
59+
console.log('remove popstate')
60+
window.removeEventListener('popstate', this.__popstate)
61+
}
62+
}
63+
if (this.push) {
64+
const to = this.push
65+
console.log('pushing', to)
66+
this.push = null
67+
this.$router.push(to)
68+
}
69+
else if (this.replace) {
70+
const to = this.replace
71+
console.log('replacing', to)
72+
this.replace = null
73+
this.$router.replace(to)
74+
}
75+
else {
76+
console.log('back detected; replacing state')
77+
// window.history.replaceState({}, '')
78+
}
79+
},
80+
__clearBogusHistory () {
81+
console.log('__clearBogusHistory')
82+
window.removeEventListener('popstate', this.__clearBogusHistory)
83+
if (window.history.state && window.history.state.hasBack) {
84+
console.log('__clearBogusHistory: hasBack; going back in history')
85+
window.addEventListener('popstate', this.__clearBogusHistory)
86+
window.history.go(-1)
87+
}
88+
}
89+
},
90+
created () {
91+
console.log('layout created')
92+
this.__clearBogusHistory()
93+
this.beforeEach = this.$router.beforeEach((to, from, next) => {
94+
console.log('route change', from, to)
95+
console.log('HISTORY length', window.history.length)
96+
if (this.modals) {
97+
if (window.history.state) {
98+
console.log('HISTORY. modal: ', window.history.state.modal, 'hasBack:', window.history.state.hasBack)
99+
}
100+
const prop = window.history.state && window.history.state.hasBack
101+
? 'push'
102+
: 'replace'
103+
console.log('going back', prop)
104+
this[prop] = to
105+
next(false)
106+
window.history.go(-1)
107+
}
108+
else {
109+
console.log('next')
110+
next()
111+
}
112+
})
113+
},
114+
beforeDestroy () {
115+
console.log('layout beforeDestroy')
116+
this.beforeEach()
117+
}
118+
}
119+
</script>

0 commit comments

Comments
 (0)