Skip to content

Commit 3a249ca

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 3a249ca

File tree

7 files changed

+94
-1
lines changed

7 files changed

+94
-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

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