Skip to content

Commit 276db36

Browse files
zack24qzack24q
committed
hack vue-router replace, fixed #11 
1 parent 89c0c82 commit 276db36

File tree

7 files changed

+74
-35
lines changed

7 files changed

+74
-35
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
8888
## Events
8989
functions: [ `on` | `once` | `off` ]
9090

91-
event types: [ `forward` | `back` | `refresh` | `reset` ]
91+
event types: [ `forward` | `back` | `replace` | `refresh` | `reset` ]
9292

9393
parameter( `to` | `from` ) properties:
9494
- `name`
@@ -101,6 +101,7 @@ parameter( `to` | `from` ) properties:
101101
```javascript
102102
this.$navigation.on('forward', (to, from) => {})
103103
this.$navigation.once('back', (to, from) => {})
104+
this.$navigation.on('replace', (to, from) => {})
104105
this.$navigation.off('refresh', (to, from) => {})
105106
this.$navigation.on('reset', () => {})
106107
```

‎README_CN.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
8787
### 事件
8888
方法: [ `on` | `once` | `off` ]
8989

90-
事件类型: [ `forward` | `back` | `refresh` | `reset` ]
90+
事件类型: [ `forward` | `back` | `replace` | `refresh` | `reset` ]
9191

9292
参数( `to` | `from` ) 的属性:
9393
- `name`
@@ -100,6 +100,7 @@ Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
100100
```javascript
101101
this.$navigation.on('forward', (to, from) => {})
102102
this.$navigation.once('back', (to, from) => {})
103+
this.$navigation.on('replace', (to, from) => {})
103104
this.$navigation.off('refresh', (to, from) => {})
104105
this.$navigation.on('reset', () => {})
105106
```

‎examples/src/App.vue

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
this.$navigation.on('back', (to, from) => {
2020
console.log('back to', to, 'from ', from)
2121
})
22+
this.$navigation.on('replace', (to, from) => {
23+
console.log('replace to', to, 'from ', from)
24+
})
2225
this.$navigation.on('refresh', (to, from) => {
2326
console.log('refresh to', to, 'from ', from)
2427
})

‎examples/src/pages/detail.vue

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
<div class="detail">
44
<p>This is the <b>detail</b> page, detail id is {{id}}</p>
55
<p>random number: {{random}}</p>
6+
<a href="javascript:void(0)" @click="replaceToNextDetail">replace to next detail</a>
7+
<br>
68
<a href="javascript:void(0)" @click="goToNextDetail">go to next detail</a>
79
<br>
810
<a href="javascript:void(0)" @click="goToIndex">go to index</a>
@@ -28,6 +30,9 @@
2830
// console.log('detail deactivated')
2931
},
3032
methods: {
33+
replaceToNextDetail() {
34+
this.$router.replace(`/list/${this.id >= 30 ? 30 : this.id + 1}`)
35+
},
3136
goToNextDetail() {
3237
this.$router.push(`/list/${this.id >= 30 ? 30 : this.id + 1}`)
3338
},

‎examples/src/store/index.js

+15-12
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,21 @@ const store = new Vuex.Store({
88
app: 'examples'
99
},
1010
mutations: {
11-
'navigation/FORWARD': (state, {to, from}) => {
12-
console.log('navigation/FORWARD', to, from)
13-
},
14-
'navigation/BACK': (state, {to, from}) => {
15-
console.log('navigation/BACK', to, from)
16-
},
17-
'navigation/REFRESH': (state, {to, from}) => {
18-
console.log('navigation/REFRESH', to, from)
19-
},
20-
'navigation/RESET': () => {
21-
console.log('navigation/RESET')
22-
}
11+
// 'navigation/FORWARD': (state, {to, from}) => {
12+
// console.log('navigation/FORWARD', to, from)
13+
// },
14+
// 'navigation/BACK': (state, {to, from}) => {
15+
// console.log('navigation/BACK', to, from)
16+
// },
17+
// 'navigation/REPLACE': (state, {to, from}) => {
18+
// console.log('navigation/REPLACE', to, from)
19+
// },
20+
// 'navigation/REFRESH': (state, {to, from}) => {
21+
// console.log('navigation/REFRESH', to, from)
22+
// },
23+
// 'navigation/RESET': () => {
24+
// console.log('navigation/RESET')
25+
// }
2326
}
2427
})
2528

‎src/index.js

+11-3
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,29 @@ export default {
1313
const bus = new Vue()
1414
const navigator = Navigator(bus, store, moduleName, keyName)
1515

16+
// hack vue-router replace for replaceFlag
17+
const routerReplace = router.replace.bind(router)
18+
let replaceFlag = false
19+
router.replace = (location, onComplete, onAbort) => {
20+
replaceFlag = true
21+
routerReplace(location, onComplete, onAbort)
22+
}
23+
1624
// init router`s keyName
1725
router.beforeEach((to, from, next) => {
1826
if (!to.query[keyName]) {
1927
const query = {...to.query}
2028
query[keyName] = genKey()
21-
next({path: to.path, query, replace: !from.query[keyName]})
29+
next({path: to.path, query, replace: replaceFlag || !from.query[keyName]})
2230
} else {
2331
next()
2432
}
2533
})
2634

2735
// record router change
2836
router.afterEach((to, from) => {
29-
navigator.record(to, from)
30-
// router.push({path: to.path, query: to.query})
37+
navigator.record(to, from, replaceFlag)
38+
replaceFlag = false
3139
})
3240

3341
Vue.component('navigation', NavComponent(keyName))

‎src/navigator.js

+36-18
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ export default (bus, store, moduleName, keyName) => {
1414
'navigation/BACK': (state, {to, from, count}) => {
1515
state.routes.splice(state.routes.length - count, count)
1616
},
17+
'navigation/REPLACE': (state, {to, from, name}) => {
18+
state.routes.splice(Routes.length - 1, 1, name)
19+
},
1720
'navigation/REFRESH': (state, {to, from}) => {
1821
},
1922
'navigation/RESET': (state) => {
@@ -26,29 +29,40 @@ export default (bus, store, moduleName, keyName) => {
2629
const forward = (name, toRoute, fromRoute) => {
2730
const to = {route: toRoute}
2831
const from = {route: fromRoute}
29-
const route = store ? store.state[moduleName].routes : Routes
32+
const routes = store ? store.state[moduleName].routes : Routes
3033
// if from does not exist, it will be set null
31-
from.name = route[route.length - 1] || null
34+
from.name = routes[routes.length - 1] || null
3235
to.name = name
33-
store ? store.commit('navigation/FORWARD', {to, from, name}) : route.push(name)
34-
window.sessionStorage.VUE_NAVIGATION = JSON.stringify(route)
36+
store ? store.commit('navigation/FORWARD', {to, from, name}) : routes.push(name)
37+
window.sessionStorage.VUE_NAVIGATION = JSON.stringify(routes)
3538
bus.$emit('forward', to, from)
3639
}
3740
const back = (count, toRoute, fromRoute) => {
3841
const to = {route: toRoute}
3942
const from = {route: fromRoute}
40-
const route = store ? store.state[moduleName].routes : Routes
41-
from.name = route[route.length - 1]
42-
to.name = route[route.length - 1 - count]
43-
store ? store.commit('navigation/BACK', {to, from, count}) : route.splice(Routes.length - count, count)
44-
window.sessionStorage.VUE_NAVIGATION = JSON.stringify(route)
43+
const routes = store ? store.state[moduleName].routes : Routes
44+
from.name = routes[routes.length - 1]
45+
to.name = routes[routes.length - 1 - count]
46+
store ? store.commit('navigation/BACK', {to, from, count}) : routes.splice(Routes.length - count, count)
47+
window.sessionStorage.VUE_NAVIGATION = JSON.stringify(routes)
4548
bus.$emit('back', to, from)
4649
}
50+
const replace = (name, toRoute, fromRoute) => {
51+
const to = {route: toRoute}
52+
const from = {route: fromRoute}
53+
const routes = store ? store.state[moduleName].routes : Routes
54+
// if from does not exist, it will be set null
55+
from.name = routes[routes.length - 1] || null
56+
to.name = name
57+
store ? store.commit('navigation/REPLACE', {to, from, name}) : routes.splice(Routes.length - 1, 1, name)
58+
window.sessionStorage.VUE_NAVIGATION = JSON.stringify(routes)
59+
bus.$emit('replace', to, from)
60+
}
4761
const refresh = (toRoute, fromRoute) => {
4862
const to = {route: toRoute}
4963
const from = {route: fromRoute}
50-
const route = store ? store.state[moduleName].routes : Routes
51-
to.name = from.name = route[route.length - 1]
64+
const routes = store ? store.state[moduleName].routes : Routes
65+
to.name = from.name = routes[routes.length - 1]
5266
store ? store.commit('navigation/REFRESH', {to, from}) : null
5367
bus.$emit('refresh', to, from)
5468
}
@@ -58,15 +72,19 @@ export default (bus, store, moduleName, keyName) => {
5872
bus.$emit('reset')
5973
}
6074

61-
const record = (toRoute, fromRoute) => {
75+
const record = (toRoute, fromRoute, replaceFlag) => {
6276
const name = getKey(toRoute, keyName)
63-
const toIndex = Routes.lastIndexOf(name)
64-
if (toIndex === -1) {
65-
forward(name, toRoute, fromRoute)
66-
} else if (toIndex === Routes.length - 1) {
67-
refresh(toRoute, fromRoute)
77+
if (replaceFlag) {
78+
replace(name, toRoute, fromRoute)
6879
} else {
69-
back(Routes.length - 1 - toIndex, toRoute, fromRoute)
80+
const toIndex = Routes.lastIndexOf(name)
81+
if (toIndex === -1) {
82+
forward(name, toRoute, fromRoute)
83+
} else if (toIndex === Routes.length - 1) {
84+
refresh(toRoute, fromRoute)
85+
} else {
86+
back(Routes.length - 1 - toIndex, toRoute, fromRoute)
87+
}
7088
}
7189
}
7290

0 commit comments

Comments
 (0)