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.

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

Jump to bottom

feat: ability to check push vs replace in navigation guard #3653

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: ability to check push vs replace in navigation guard #3653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
View file
Open in desktop
Expand Up @@ -27,6 +27,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>
<li><a href="keepalive-view">Keepalive View</a></li>
<li><a href="multi-app">Multiple Apps</a></li>
<li><a href="restart-app">Restart App</a></li>
Expand Down
77 changes: 77 additions & 0 deletions examples/push-or-replace/app.js
View file
Open in desktop
@@ -0,0 +1,77 @@
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const store = Vue.observable({
replace: false,
time: new Date().getTime()
})

const computed = {
replace () {
return store.replace
},
time () {
return store.time
}
}

const Home = { computed, template: '<div>home {{replace}} {{time}}</div>' }
const Page = { computed, template: '<div>page {{replace}} {{time}}</div>' }
const Detail = { computed, template: '<div>detail {{replace}} {{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) => {
store.replace = to.replace
store.time = new Date().getTime()
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
@@ -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.chunk.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
Expand Up @@ -71,6 +71,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: Object).replace = true
}
this.transitionTo(
location,
route => {
Expand Down
6 changes: 6 additions & 0 deletions src/history/html5.js
View file
Open in desktop
Expand Up @@ -66,6 +66,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: Object).replace = true
}
this.transitionTo(location, route => {
replaceState(cleanPath(this.base + route.fullPath))
handleScroll(this.router, route, fromRoute, false)
Expand Down
3 changes: 2 additions & 1 deletion src/util/location.js
View file
Open in desktop
Expand Up @@ -64,6 +64,7 @@ export function normalizeLocation (
_normalized: true,
path,
query,
hash
hash,
replace: !!next.replace
}
}
1 change: 1 addition & 0 deletions src/util/route.js
View file
Open in desktop
Expand Up @@ -23,6 +23,7 @@ export function createRoute (
meta: (record && record.meta) || {},
path: location.path || '/',
hash: location.hash || '',
replace: !!location.replace,
query,
params: location.params || {},
fullPath: getFullPath(location, stringifyQuery),
Expand Down