diff --git a/examples/index.html b/examples/index.html index 5f2cd4f328..535035ad62 100644 --- a/examples/index.html +++ b/examples/index.html @@ -27,6 +27,7 @@

Vue Router Examples

  • Auth Flow
  • Discrete Components
  • Nested Routers
  • +
  • Push Or Replace
  • Keepalive View
  • Multiple Apps
  • Restart App
  • diff --git a/examples/push-or-replace/app.js b/examples/push-or-replace/app.js new file mode 100644 index 0000000000..16409ff5fb --- /dev/null +++ b/examples/push-or-replace/app.js @@ -0,0 +1,72 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' + +Vue.use(VueRouter) + +const Home = { template: '
    home {{$route.query.time}}
    ' } +const Page = { template: '
    page {{$route.query.time}}
    ' } +const Detail = { template: '
    detail {{$route.query.time}}
    ' } + +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: ` +
    +

    Push Or Replace

    +

    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()
    +  }
    +})
    +      
    + + +
    + ` +}).$mount('#app') diff --git a/examples/push-or-replace/index.html b/examples/push-or-replace/index.html new file mode 100644 index 0000000000..0b88284f99 --- /dev/null +++ b/examples/push-or-replace/index.html @@ -0,0 +1,6 @@ + + +← Examples index +
    + + diff --git a/src/history/hash.js b/src/history/hash.js index e0ddf2d7c1..b40616c1c3 100644 --- a/src/history/hash.js +++ b/src/history/hash.js @@ -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.replace) { + (location: Object).replace = true + } this.transitionTo( location, route => { diff --git a/src/history/html5.js b/src/history/html5.js index faaa02fcd8..d788029f08 100644 --- a/src/history/html5.js +++ b/src/history/html5.js @@ -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.replace) { + (location: Object).replace = true + } this.transitionTo(location, route => { replaceState(cleanPath(this.base + route.fullPath)) handleScroll(this.router, route, fromRoute, false) diff --git a/src/util/location.js b/src/util/location.js index fb98d45370..a2f72f8171 100644 --- a/src/util/location.js +++ b/src/util/location.js @@ -64,6 +64,7 @@ export function normalizeLocation ( _normalized: true, path, query, - hash + hash, + replace: !!next.replace } } diff --git a/src/util/route.js b/src/util/route.js index 9d8e31cd1a..9fdda7a7f9 100644 --- a/src/util/route.js +++ b/src/util/route.js @@ -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),