support custom stringify/parse query

Author: yyx990803

flow/declarations.js

@@ -20,6 +20,8 @@ declare type RouterOptions = {
   mode?: string;
   base?: string;
   linkActiveClass?: string;
+  parseQuery?: (query: string) => Object;
+  stringifyQuery?: (query: Object) => string;
   scrollBehavior?: (
     to: Route,
     from: Route,

src/components/link.js

@@ -31,9 +31,13 @@ export default {
     const router = this.$router
     const current = this.$route
     const { location, route, href } = router.resolve(this.to, current, this.append)
+
     const classes = {}
     const activeClass = this.activeClass || router.options.linkActiveClass || 'router-link-active'
-    const compareTarget = location.path ? createRoute(null, location) : route
+    const compareTarget = location.path
+      ? createRoute(null, location, null, router)
+      : route
+
     classes[activeClass] = this.exact
       ? isSameRoute(current, compareTarget)
       : isIncludedRoute(current, compareTarget)

src/create-matcher.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import type VueRouter from './index'
 import { assert, warn } from './util/warn'
 import { createRoute } from './util/route'
 import { createRouteMap } from './create-route-map'
@@ -12,7 +13,10 @@ export type Matcher = {
   addRoutes: (routes: Array<RouteConfig>) => void;
 };
 
-export function createMatcher (routes: Array<RouteConfig>): Matcher {
+export function createMatcher (
+  routes: Array<RouteConfig>,
+  router: VueRouter
+): Matcher {
   const { pathMap, nameMap } = createRouteMap(routes)
 
   function addRoutes (routes) {
@@ -24,7 +28,7 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
     currentRoute?: Route,
     redirectedFrom?: Location
   ): Route {
-    const location = normalizeLocation(raw, currentRoute)
+    const location = normalizeLocation(raw, currentRoute, false, router)
     const { name } = location
 
     if (name) {
@@ -70,7 +74,7 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
   ): Route {
     const originalRedirect = record.redirect
     let redirect = typeof originalRedirect === 'function'
-        ? originalRedirect(createRoute(record, location))
+        ? originalRedirect(createRoute(record, location, null, router))
         : originalRedirect
 
     if (typeof redirect === 'string') {
@@ -156,7 +160,7 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
     if (record && record.matchAs) {
       return alias(record, location, record.matchAs)
     }
-    return createRoute(record, location, redirectedFrom)
+    return createRoute(record, location, redirectedFrom, router)
   }
 
   return {

src/history/base.js

@@ -1,11 +1,11 @@
 /* @flow */
 
+import { _Vue } from '../install'
 import type Router from '../index'
 import { warn } from '../util/warn'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
 import { START, isSameRoute } from '../util/route'
-import { _Vue } from '../install'
 
 export class History {
   router: Router;

src/index.js

@@ -37,7 +37,7 @@ export default class VueRouter {
     this.options = options
     this.beforeHooks = []
     this.afterHooks = []
-    this.matcher = createMatcher(options.routes || [])
+    this.matcher = createMatcher(options.routes || [], this)
 
     let mode = options.mode || 'hash'
     this.fallback = mode === 'history' && !supportsPushState
@@ -178,7 +178,12 @@ export default class VueRouter {
     normalizedTo: Location,
     resolved: Route
   } {
-    const location = normalizeLocation(to, current || this.history.current, append)
+    const location = normalizeLocation(
+      to,
+      current || this.history.current,
+      append,
+      this
+    )
     const route = this.match(location, current)
     const fullPath = route.redirectedFrom || route.fullPath
     const base = this.history.base

src/util/location.js

@@ -1,14 +1,16 @@
 /* @flow */
 
+import type VueRouter from '../index'
 import { parsePath, resolvePath } from './path'
 import { resolveQuery } from './query'
 import { fillParams } from './params'
 import { warn } from './warn'
 
 export function normalizeLocation (
   raw: RawLocation,
-  current?: Route,
-  append?: boolean
+  current: ?Route,
+  append: ?boolean,
+  router: ?VueRouter
 ): Location {
   let next: Location = typeof raw === 'string' ? { path: raw } : raw
   // named target
@@ -38,7 +40,13 @@ export function normalizeLocation (
   const path = parsedPath.path
     ? resolvePath(parsedPath.path, basePath, append || next.append)
     : (current && current.path) || '/'
-  const query = resolveQuery(parsedPath.query, next.query)
+
+  const query = resolveQuery(
+    parsedPath.query,
+    next.query,
+    router && router.options.parseQuery
+  )
+
   let hash = next.hash || parsedPath.hash
   if (hash && hash.charAt(0) !== '#') {
     hash = `#${hash}`

src/util/query.js

@@ -17,11 +17,13 @@ const decode = decodeURIComponent
 
 export function resolveQuery (
   query: ?string,
-  extraQuery: Dictionary<string> = {}
+  extraQuery: Dictionary<string> = {},
+  _parseQuery: ?Function
 ): Dictionary<string> {
+  const parse = _parseQuery || parseQuery
   let parsedQuery
   try {
-    parsedQuery = parseQuery(query || '')
+    parsedQuery = parse(query || '')
   } catch (e) {
     process.env.NODE_ENV !== 'production' && warn(false, e.message)
     parsedQuery = {}

src/util/route.js

@@ -1,26 +1,29 @@
 /* @flow */
 
+import type VueRouter from '../index'
 import { stringifyQuery } from './query'
 
 const trailingSlashRE = /\/?$/
 
 export function createRoute (
   record: ?RouteRecord,
   location: Location,
-  redirectedFrom?: Location
+  redirectedFrom?: ?Location,
+  router?: VueRouter
 ): Route {
+  const stringifyQuery = router && router.options.stringifyQuery
   const route: Route = {
     name: location.name || (record && record.name),
     meta: (record && record.meta) || {},
     path: location.path || '/',
     hash: location.hash || '',
     query: location.query || {},
     params: location.params || {},
-    fullPath: getFullPath(location),
+    fullPath: getFullPath(location, stringifyQuery),
     matched: record ? formatMatch(record) : []
   }
   if (redirectedFrom) {
-    route.redirectedFrom = getFullPath(redirectedFrom)
+    route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
   }
   return Object.freeze(route)
 }
@@ -39,8 +42,12 @@ function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
   return res
 }
 
-function getFullPath ({ path, query = {}, hash = '' }) {
-  return (path || '/') + stringifyQuery(query) + hash
+function getFullPath (
+  { path, query = {}, hash = '' },
+  _stringifyQuery
+): string {
+  const stringify = _stringifyQuery || stringifyQuery
+  return (path || '/') + stringify(query) + hash
 }
 
 export function isSameRoute (a: Route, b: ?Route): boolean {

test/unit/specs/custom-query.spec.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import VueRouter from '../../../src/index'
+
+Vue.use(VueRouter)
+
+describe('custom query parse/stringify', () => {
+  it('should work', () => {
+    const router = new VueRouter({
+      parseQuery: () => ({ foo: 1 }),
+      stringifyQuery: () => '?foo=1'
+    })
+
+    router.push('/?bar=2')
+
+    expect(router.currentRoute.query).toEqual({ foo: 1 })
+    expect(router.currentRoute.fullPath).toEqual('/?foo=1')
+  })
+})

types/router.d.ts

@@ -47,6 +47,8 @@ export interface RouterOptions {
   mode?: RouterMode;
   base?: string;
   linkActiveClass?: string;
+  parseQuery?: (query: string) => Object;
+  stringifyQuery?: (query: Object) => string;
   scrollBehavior?: (
     to: Route,
     from: Route,