Skip to content

add the replace attribute in location for hooking in beforeEach #1906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

add the replace attribute in location for hooking in beforeEach #1906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4bb9331
add the replace attribute in location for hooking in beforeEach
Nov 26, 2017
474baa1
CircleCI failed fix
Nov 26, 2017
538ce60
CircleCI failed fix2
Nov 27, 2017
e533b54
replace support in normalizeLocation
Dec 18, 2017
d3a51dc
add the example of replace in navigation guard
Dec 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ <h1>Vue Router Examples</h1>
<li><a href="auth-flow">Auth Flow</a></li>
<li><a href="discrete-components">Discrete Components</a></li>
<li><a href="nested-router">Nested Routers</a></li>
<li><a href="push-or-replace">Push Or Replace</a></li>
</ul>
</body>
</html>
73 changes: 73 additions & 0 deletions examples/push-or-replace/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>home {{$route.query.time}}</div>' }
const Page = { template: '<div>page {{$route.query.time}}</div>' }
const Detail = { template: '<div>detail {{$route.query.time}}</div>' }

const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },

{ path: '/page', component: Page },

{ path: '/detail', component: Detail }

]
})

// User can check the replace type in navigation guard, and do anything they want.
router.beforeEach((to, from, next) => {
if (to.replace) {
to.query.replace = true
} else {
to.query.replace = false
}

if (to && to.query && !to.query.time) {
to.query.time = new Date().getTime()
next(to)
} else {
next()
}
})

new Vue({
router,
template: `
<div id="app">
<h1>Push Or Replace</h1>
<p>User can check the replace type in navigation guard, and do anything they want.</p>
<pre>
router.beforeEach((to, from, next) => {
if (to.replace) {
to.query.replace = true
}
else {
to.query.replace = false
}

if (to && to.query && !to.query.time) {
to.query.time = new Date().getTime()
next(to)
} else {
next()
}
})
</pre>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/page">/page</router-link> ( push )</li>
<li><a @click="$router.push('/page')">/page</a> $router.push('/page') </li>
<li><router-link to="/detail" replace>/detail</router-link> ( replace )</li>
<li><a @click="$router.replace('/detail')">/detail</a> $router.replace('/detail') </li>
<li><a @click="$router.go(-1)">back</a> $router.go(-1) </li>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')
6 changes: 6 additions & 0 deletions examples/push-or-replace/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/global.css">
<a href="/">&larr; Examples index</a>
<div id="app"></div>
<script src="/__build__/shared.js"></script>
<script src="/__build__/push-or-replace.js"></script>
6 changes: 6 additions & 0 deletions src/history/hash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ export class HashHistory extends History {

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
if (typeof location === 'string') {
location = { path: location }
}
if (typeof location === 'object' && !location.replace) {
(location: Object).replace = true
}
this.transitionTo(location, route => {
replaceHash(route.fullPath)
handleScroll(this.router, route, fromRoute, false)
Expand Down
6 changes: 6 additions & 0 deletions src/history/html5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ export class HTML5History extends History {

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
if (typeof location === 'string') {
location = { path: location }
}
if (typeof location === 'object' && !location.replace) {
(location: Object).replace = true
}
Comment on lines +58 to +60
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since location is an object at this point, we can directly set replace to true

Suggested change
if (typeof location === 'object' && !location.replace) {
(location: Object).replace = true
}
(location: Object).replace = true

this.transitionTo(location, route => {
replaceState(cleanPath(this.base + route.fullPath))
handleScroll(this.router, route, fromRoute, false)
Expand Down
3 changes: 3 additions & 0 deletions src/util/location.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,13 @@ export function normalizeLocation (
hash = `#${hash}`
}

const replace = next.replace || false
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need to create a new variable. It can also be written as !!next.replace


return {
_normalized: true,
path,
query,
replace,
hash
}
}
Expand Down
1 change: 1 addition & 0 deletions src/util/route.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export function createRoute (
meta: (record && record.meta) || {},
path: location.path || '/',
hash: location.hash || '',
replace: location.replace || false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
replace: location.replace || false,
replace: !!location.replace,

query,
params: location.params || {},
fullPath: getFullPath(location, stringifyQuery),
Expand Down