Add access to history state

flow/declarations.js

@@ -1,3 +1,4 @@
+/* @flow */
 declare var document: Document;
 
 declare class RouteRegExp extends RegExp {
@@ -83,6 +84,7 @@ declare type Location = {
   path?: string;
   hash?: string;
   query?: Dictionary<string>;
+  state?: mixed;
   params?: Dictionary<string>;
   append?: boolean;
   replace?: boolean;
@@ -95,6 +97,7 @@ declare type Route = {
   name: ?string;
   hash: string;
   query: Dictionary<string>;
+  state: mixed;
   params: Dictionary<string>;
   fullPath: string;
   matched: Array<RouteRecord>;

package.json

@@ -28,7 +28,7 @@
     "dev": "node examples/server.js",
     "dev:dist": "rollup -wm -c build/rollup.dev.config.js",
     "build": "node build/build.js",
-    "lint": "eslint src examples",
+    "lint": "eslint src examples test flow build",
     "test": "npm run lint && npm run flow && npm run test:unit && npm run test:e2e && npm run test:types",
     "flow": "flow check",
     "test:unit": "jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",

src/history/abstract.js

@@ -42,7 +42,14 @@ export class AbstractHistory extends History {
 
   getCurrentLocation () {
     const current = this.stack[this.stack.length - 1]
-    return current ? current.fullPath : '/'
+    return current
+      ? {
+        path: current.path,
+        query: current.query,
+        hash: current.hash,
+        state: current.state
+      }
+      : { path: '/' }
   }
 
   ensureURL () {

src/history/base.js

@@ -28,7 +28,7 @@ export class History {
   +push: (loc: RawLocation) => void;
   +replace: (loc: RawLocation) => void;
   +ensureURL: (push?: boolean) => void;
-  +getCurrentLocation: () => string;
+  +getCurrentLocation: () => Location;
 
   constructor (router: Router, base: ?string) {
     this.router = router

src/history/hash.js

@@ -2,7 +2,8 @@
 
 import type Router from '../index'
 import { History } from './base'
-import { cleanPath } from '../util/path'
+import { cleanPath, parsePath } from '../util/path'
+import { resolveQuery, stringifyQuery } from '../util/query'
 import { getLocation } from './html5'
 import { setupScroll, handleScroll } from '../util/scroll'
 import { pushState, replaceState, supportsPushState } from '../util/push-state'
@@ -74,12 +75,16 @@ export class HashHistory extends History {
   }
 
   getCurrentLocation () {
-    return getHash()
+    const { path, query, hash } = parsePath(getHash())
+    return { path, query: resolveQuery(query), hash }
   }
 }
 
 function checkFallback (base) {
-  const location = getLocation(base)
+  const rawLocation = getLocation(base)
+  const location = typeof rawLocation === 'string'
+    ? rawLocation
+    : `${rawLocation.path || ''}${stringifyQuery(rawLocation.query || {})}${rawLocation.hash || ''}`
   if (!/^\/#/.test(location)) {
     window.location.replace(
       cleanPath(base + '/#' + location)
@@ -114,15 +119,15 @@ function getUrl (path) {
 
 function pushHash (path) {
   if (supportsPushState) {
-    pushState(getUrl(path))
+    pushState(undefined, getUrl(path))
   } else {
     window.location.hash = path
   }
 }
 
 function replaceHash (path) {
   if (supportsPushState) {
-    replaceState(getUrl(path))
+    replaceState(undefined, getUrl(path))
   } else {
     window.location.replace(getUrl(path))
   }

src/history/html5.js

@@ -3,6 +3,7 @@
 import type Router from '../index'
 import { History } from './base'
 import { cleanPath } from '../util/path'
+import { resolveQuery } from '../util/query'
 import { START } from '../util/route'
 import { setupScroll, handleScroll } from '../util/scroll'
 import { pushState, replaceState, supportsPushState } from '../util/push-state'
@@ -44,7 +45,8 @@ export class HTML5History extends History {
   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     const { current: fromRoute } = this
     this.transitionTo(location, route => {
-      pushState(cleanPath(this.base + route.fullPath))
+      const state = typeof location === 'string' ? undefined : location.state
+      pushState(state, cleanPath(this.base + route.fullPath))
       handleScroll(this.router, route, fromRoute, false)
       onComplete && onComplete(route)
     }, onAbort)
@@ -53,7 +55,11 @@ export class HTML5History extends History {
   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     const { current: fromRoute } = this
     this.transitionTo(location, route => {
-      replaceState(cleanPath(this.base + route.fullPath))
+      const state = typeof location === 'string' ? undefined : location.state
+      replaceState(
+        state,
+        cleanPath(this.base + route.fullPath),
+      )
       handleScroll(this.router, route, fromRoute, false)
       onComplete && onComplete(route)
     }, onAbort)
@@ -62,19 +68,25 @@ export class HTML5History extends History {
   ensureURL (push?: boolean) {
     if (getLocation(this.base) !== this.current.fullPath) {
       const current = cleanPath(this.base + this.current.fullPath)
-      push ? pushState(current) : replaceState(current)
+      if (push) pushState(this.current.state, current)
+      else replaceState(this.current.state, current)
     }
   }
 
-  getCurrentLocation (): string {
+  getCurrentLocation (): Location {
     return getLocation(this.base)
   }
 }
 
-export function getLocation (base: string): string {
+export function getLocation (base: string): Location {
   let path = decodeURI(window.location.pathname)
   if (base && path.indexOf(base) === 0) {
     path = path.slice(base.length)
   }
-  return (path || '/') + window.location.search + window.location.hash
+  return {
+    path: (path || '/'),
+    query: resolveQuery((window.location.search: string)),
+    hash: (window.location.hash: string),
+    state: window.history.state ? window.history.state.state : undefined
+  }
 }

src/util/deepEqual.js

@@ -0,0 +1,59 @@
+const hasOwn = Object.prototype.hasOwnProperty
+
+function is (x, y) {
+  if (x === y) {
+    // is(-0, +0) === false
+    return x !== 0 || y !== 0 || 1 / x === 1 / y
+  } else {
+    /* eslint-disable no-self-compare */
+    return x !== x && y !== y // is(NaN, NaN) === true
+    /* eslint-enable no-self-compare */
+  }
+}
+
+// deep equal, with guard against circular references
+const guardedDeepEqual = (objA, objB, bufferA, bufferB) => {
+  if (is(objA, objB)) return true
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false
+  }
+  const seenA = bufferA.indexOf(objA) !== -1
+  const seenB = bufferB.indexOf(objB) !== -1
+
+  if (seenA || seenB) return seenA && seenB
+
+  bufferA.push(objA)
+  bufferB.push(objB)
+
+  const keysA = Object.keys(objA)
+  const keysB = Object.keys(objB)
+
+  if (keysA.length !== keysB.length) return false
+
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwn.call(objB, keysA[i])) return false
+    const valA = objA[keysA[i]]
+    const valB = objB[keysA[i]]
+    if (
+      typeof valA === 'object' &&
+      valA &&
+      typeof valB === 'object' &&
+      valB &&
+      !guardedDeepEqual(valA, valB, bufferA, bufferB)
+    ) {
+      return false
+    } else if (!is(valA, valB)) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export default (objA, objB) => guardedDeepEqual(objA, objB, [], [])

src/util/location.js

@@ -57,6 +57,7 @@ export function normalizeLocation (
     _normalized: true,
     path,
     query,
-    hash
+    hash,
+    state: next.state
   }
 }

src/util/push-state.js

@@ -37,23 +37,23 @@ export function setStateKey (key: string) {
   _key = key
 }
 
-export function pushState (url?: string, replace?: boolean) {
+export function pushState (state: mixed, url: string, replace?: boolean) {
   saveScrollPosition()
   // try...catch the pushState call to get around Safari
   // DOM Exception 18 where it limits to 100 pushState calls
   const history = window.history
   try {
     if (replace) {
-      history.replaceState({ key: _key }, '', url)
+      history.replaceState({ key: _key, state }, '', url)
     } else {
       _key = genKey()
-      history.pushState({ key: _key }, '', url)
+      history.pushState({ key: _key, state }, '', url)
     }
   } catch (e) {
     window.location[replace ? 'replace' : 'assign'](url)
   }
 }
 
-export function replaceState (url?: string) {
-  pushState(url, true)
+export function replaceState (state: mixed, url: string) {
+  pushState(state, url, true)
 }

src/util/route.js

@@ -2,6 +2,7 @@
 
 import type VueRouter from '../index'
 import { stringifyQuery } from './query'
+import deepEqual from './deepEqual'
 
 const trailingSlashRE = /\/?$/
 
@@ -23,6 +24,7 @@ export function createRoute (
     meta: (record && record.meta) || {},
     path: location.path || '/',
     hash: location.hash || '',
+    state: location.state,
     query,
     params: location.params || {},
     fullPath: getFullPath(location, stringifyQuery),
@@ -79,14 +81,16 @@ export function isSameRoute (a: Route, b: ?Route): boolean {
     return (
       a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
       a.hash === b.hash &&
-      isObjectEqual(a.query, b.query)
+      isObjectEqual(a.query, b.query) &&
+      deepEqual(a.state, b.state)
     )
   } else if (a.name && b.name) {
     return (
       a.name === b.name &&
       a.hash === b.hash &&
       isObjectEqual(a.query, b.query) &&
-      isObjectEqual(a.params, b.params)
+      isObjectEqual(a.params, b.params) &&
+      deepEqual(a.state, b.state)
     )
   } else {
     return false

test/e2e/runner.js

@@ -1,4 +1,3 @@
-var path = require('path')
 var spawn = require('cross-spawn')
 var args = process.argv.slice(2)
 

test/e2e/specs/active-links.js

@@ -2,7 +2,7 @@
 module.exports = {
   'active links': function (browser) {
     browser
-    .url('http://localhost:8080/active-links/')
+      .url('http://localhost:8080/active-links/')
       .waitForElementVisible('#app', 1000)
       .assert.count('li a', 11)
       // assert correct href with base

test/e2e/specs/auth-flow.js

@@ -1,7 +1,7 @@
 module.exports = {
   'auth flow': function (browser) {
     browser
-    .url('http://localhost:8080/auth-flow/')
+      .url('http://localhost:8080/auth-flow/')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('#app p', 'You are logged out')
 
@@ -21,7 +21,7 @@ module.exports = {
       .assert.containsText('#app p', 'Yay you made it!')
 
     // reload
-    .url('http://localhost:8080/auth-flow/')
+      .url('http://localhost:8080/auth-flow/')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('#app p', 'You are logged in')
 
@@ -32,7 +32,7 @@ module.exports = {
       .assert.containsText('#app p', 'Yay you made it!')
 
     // directly visit dashboard when logged in
-    .url('http://localhost:8080/auth-flow/dashboard')
+      .url('http://localhost:8080/auth-flow/dashboard')
       .waitForElementVisible('#app', 1000)
       .assert.urlEquals('http://localhost:8080/auth-flow/dashboard')
       .assert.containsText('#app h2', 'Dashboard')
@@ -44,7 +44,7 @@ module.exports = {
       .assert.containsText('#app p', 'You are logged out')
 
     // directly visit dashboard when logged out
-    .url('http://localhost:8080/auth-flow/dashboard')
+      .url('http://localhost:8080/auth-flow/dashboard')
       .waitForElementVisible('#app', 1000)
       .assert.urlEquals('http://localhost:8080/auth-flow/login?redirect=%2Fdashboard')
       .assert.containsText('#app h2', 'Login')

test/e2e/specs/basic.js

@@ -1,7 +1,7 @@
 module.exports = {
   basic: function (browser) {
     browser
-    .url('http://localhost:8080/basic/')
+      .url('http://localhost:8080/basic/')
       .waitForElementVisible('#app', 1000)
       .assert.count('li', 5)
       .assert.count('li a', 5)
@@ -34,10 +34,10 @@ module.exports = {
       .assert.containsText('.view', 'unicode')
 
       // check initial visit
-    .url('http://localhost:8080/basic/foo')
+      .url('http://localhost:8080/basic/foo')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('.view', 'foo')
-    .url('http://localhost:8080/basic/%C3%A9')
+      .url('http://localhost:8080/basic/%C3%A9')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('.view', 'unicode')
       .end()

test/e2e/specs/data-fetching.js

@@ -1,7 +1,7 @@
 module.exports = {
   'data fetching': function (browser) {
     browser
-    .url('http://localhost:8080/data-fetching/')
+      .url('http://localhost:8080/data-fetching/')
       .waitForElementVisible('#app', 1000)
       .assert.count('li a', 4)
       .assert.containsText('.view', 'home')

test/e2e/specs/hash-mode.js

@@ -1,7 +1,7 @@
 module.exports = {
   'Hash mode': function (browser) {
     browser
-    .url('http://localhost:8080/hash-mode/')
+      .url('http://localhost:8080/hash-mode/')
       .waitForElementVisible('#app', 1000)
       .assert.count('li', 5)
       .assert.count('li a', 4)
@@ -28,10 +28,10 @@ module.exports = {
       .assert.containsText('.view', 'bar')
 
     // check initial visit
-    .url('http://localhost:8080/hash-mode/#/foo')
+      .url('http://localhost:8080/hash-mode/#/foo')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('.view', 'foo')
-    .url('http://localhost:8080/hash-mode/#/%C3%A9')
+      .url('http://localhost:8080/hash-mode/#/%C3%A9')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('.view', 'unicode')
       .end()