Skip to content

Commit 47a85aa

Browse files
iceprosurfaceiceprosurface
committed
feat: ability to check push vs replace in navigation guard
issue vuejs#1620 pull request vuejs#1906
1 parent 221e8b3 commit 47a85aa

File tree

7 files changed

+99
-1
lines changed

7 files changed

+99
-1
lines changed

‎examples/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1>Vue Router Examples</h1>
2727
<li><a href="auth-flow">Auth Flow</a></li>
2828
<li><a href="discrete-components">Discrete Components</a></li>
2929
<li><a href="nested-router">Nested Routers</a></li>
30+
<li><a href="push-or-replace">Push Or Replace</a></li>
3031
<li><a href="keepalive-view">Keepalive View</a></li>
3132
<li><a href="multi-app">Multiple Apps</a></li>
3233
<li><a href="restart-app">Restart App</a></li>

‎examples/push-or-replace/app.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import Vue from 'vue'
2+
import VueRouter from 'vue-router'
3+
4+
Vue.use(VueRouter)
5+
6+
const store = Vue.observable({
7+
replace: false,
8+
time: new Date().getTime()
9+
})
10+
11+
const computed = {
12+
replace () {
13+
return store.replace
14+
},
15+
time () {
16+
return store.time
17+
}
18+
}
19+
20+
const Home = { computed, template: '<div>home {{replace}} {{time}}</div>' }
21+
const Page = { computed, template: '<div>page {{replace}} {{time}}</div>' }
22+
const Detail = { computed, template: '<div>detail {{replace}} {{time}}</div>' }
23+
24+
const router = new VueRouter({
25+
mode: 'history',
26+
base: __dirname,
27+
routes: [
28+
{ path: '/', component: Home },
29+
30+
{ path: '/page', component: Page },
31+
32+
{ path: '/detail', component: Detail }
33+
34+
]
35+
})
36+
37+
// User can check the replace type in navigation guard, and do anything they want.
38+
router.beforeEach((to, from, next) => {
39+
store.replace = to.replace
40+
store.time = new Date().getTime()
41+
next()
42+
})
43+
44+
new Vue({
45+
router,
46+
template: `
47+
<div id="app">
48+
<h1>Push Or Replace</h1>
49+
<p>User can check the replace type in navigation guard, and do anything they want.</p>
50+
<pre>
51+
router.beforeEach((to, from, next) => {
52+
if (to.replace) {
53+
to.query.replace = true
54+
}
55+
else {
56+
to.query.replace = false
57+
}
58+
if (to && to.query && !to.query.time) {
59+
to.query.time = new Date().getTime()
60+
next(to)
61+
} else {
62+
next()
63+
}
64+
})
65+
</pre>
66+
<ul>
67+
<li><router-link to="/">/</router-link></li>
68+
<li><router-link to="/page">/page</router-link> ( push )</li>
69+
<li><a @click="$router.push('/page')">/page</a> $router.push('/page') </li>
70+
<li><router-link to="/detail" replace>/detail</router-link> ( replace )</li>
71+
<li><a @click="$router.replace('/detail')">/detail</a> $router.replace('/detail') </li>
72+
<li><a @click="$router.go(-1)">back</a> $router.go(-1) </li>
73+
</ul>
74+
<router-view class="view"></router-view>
75+
</div>
76+
`
77+
}).$mount('#app')

‎examples/push-or-replace/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!DOCTYPE html>
2+
<link rel="stylesheet" href="/global.css">
3+
<a href="/">&larr; Examples index</a>
4+
<div id="app"></div>
5+
<script src="/__build__/shared.chunk.js"></script>
6+
<script src="/__build__/push-or-replace.js"></script>

‎src/history/hash.js

+6
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,12 @@ export class HashHistory extends History {
7171

7272
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
7373
const { current: fromRoute } = this
74+
if (typeof location === 'string') {
75+
location = { path: location }
76+
}
77+
if (typeof location === 'object') {
78+
(location: Object).replace = true
79+
}
7480
this.transitionTo(
7581
location,
7682
route => {

‎src/history/html5.js

+6
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,12 @@ export class HTML5History extends History {
6666

6767
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
6868
const { current: fromRoute } = this
69+
if (typeof location === 'string') {
70+
location = { path: location }
71+
}
72+
if (typeof location === 'object') {
73+
(location: Object).replace = true
74+
}
6975
this.transitionTo(location, route => {
7076
replaceState(cleanPath(this.base + route.fullPath))
7177
handleScroll(this.router, route, fromRoute, false)

‎src/util/location.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export function normalizeLocation (
6464
_normalized: true,
6565
path,
6666
query,
67-
hash
67+
hash,
68+
replace: !!next.replace
6869
}
6970
}

‎src/util/route.js

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export function createRoute (
2323
meta: (record && record.meta) || {},
2424
path: location.path || '/',
2525
hash: location.hash || '',
26+
replace: !!location.replace,
2627
query,
2728
params: location.params || {},
2829
fullPath: getFullPath(location, stringifyQuery),

0 commit comments

Comments
 (0)