Skip to content
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.

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

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

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/index.html
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
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
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
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
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
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
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