Skip to content

feat: optimize method to determine whether the two path are the same in ensureUrl methods #3477

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

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/history/hash.js
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
import type Router from '../index'
import { History } from './base'
import { cleanPath } from '../util/path'
import { isSameRoute, createPlainRoute } from '../util/route'
import { getLocation } from './html5'
import { setupScroll, handleScroll } from '../util/scroll'
import { pushState, replaceState, supportsPushState } from '../util/push-state'
@@ -87,8 +88,10 @@ export class HashHistory extends History {
}

ensureURL (push?: boolean) {
const current = this.current.fullPath
if (getHash() !== current) {
const location = getHash()
const plainRoute = createPlainRoute(location)
if (!isSameRoute(plainRoute, this.current)) {
const current = this.current.fullPath
push ? pushHash(current) : replaceHash(current)
}
}
6 changes: 4 additions & 2 deletions src/history/html5.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
import type Router from '../index'
import { History } from './base'
import { cleanPath } from '../util/path'
import { START } from '../util/route'
import { START, isSameRoute, createPlainRoute } from '../util/route'
import { setupScroll, handleScroll } from '../util/scroll'
import { pushState, replaceState, supportsPushState } from '../util/push-state'

@@ -74,7 +74,9 @@ export class HTML5History extends History {
}

ensureURL (push?: boolean) {
if (getLocation(this.base) !== this.current.fullPath) {
const location = getLocation(this.base)
const plainRoute = createPlainRoute(location)
if (!isSameRoute(plainRoute, this.current)) {
const current = cleanPath(this.base + this.current.fullPath)
push ? pushState(current) : replaceState(current)
}
10 changes: 8 additions & 2 deletions src/util/route.js
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@

import type VueRouter from '../index'
import { stringifyQuery } from './query'
import { normalizeLocation } from './location'

const trailingSlashRE = /\/?$/

@@ -96,8 +97,8 @@ export function isSameRoute (a: Route, b: ?Route): boolean {
function isObjectEqual (a = {}, b = {}): boolean {
// handle null value #1566
if (!a || !b) return a === b
const aKeys = Object.keys(a).sort()
const bKeys = Object.keys(b).sort()
const aKeys = Object.keys(a)
const bKeys = Object.keys(b)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why should this be removed?

Copy link
Author

@wxwzl wxwzl May 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if that not be removed, they are the same object as below:

var a = {a:1,b:2}; var b = {b:2,a:1};

Object.keys method will keep the order of attributes in an object as the attributes were added.

if that not be removed, "https://vesaas.com/?a=1&b=2" and "https://vesaas.com/?b=2&a=1" will be thought the same route.

  ensureURL (push?: boolean) {
    const location = getHash()
    const plainRoute = createPlainRoute(location)
    if (!isSameRoute(plainRoute, this.current)) {
      const current = this.current.fullPath
      push ? pushHash(current) : replaceHash(current)
    }
  }

the "ensureURL " method will not go into 'if ' block in this scene.

if (aKeys.length !== bKeys.length) {
return false
}
@@ -149,3 +150,8 @@ export function handleRouteEntered (route: Route) {
}
}
}
/** just create a route without any added process */
export function createPlainRoute (url: string): Route {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, this function (and its tests) should be removed since we just need to call normalizeLocation() on the url and compare it with this.current

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but how to compare with this current ,this.current is a Route object.I thought if it turn to a Route object , the logic can be keep smooth and complete.

const location = normalizeLocation(url)
return createRoute(null, location)
}
45 changes: 41 additions & 4 deletions test/unit/specs/route.spec.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { isSameRoute, isIncludedRoute } from '../../../src/util/route'
import { isSameRoute, isIncludedRoute, createPlainRoute } from '../../../src/util/route'

describe('Route utils', () => {
describe('isSameRoute', () => {
@@ -13,7 +13,13 @@ describe('Route utils', () => {
hash: '#hi',
query: { arr: ['1', '2'], foo: 'bar' }
}
expect(isSameRoute(a, b)).toBe(true)
const c = {
path: '/a/', // Allow trailing slash
hash: '#hi',
query: { foo: 'bar', arr: [1, 2] }
}
expect(isSameRoute(a, b)).toBe(false)
expect(isSameRoute(a, c)).toBe(true)
})

it('name', () => {
@@ -28,7 +34,13 @@ describe('Route utils', () => {
hash: '#hi',
query: { arr: ['1', '2'], foo: 'bar' }
}
expect(isSameRoute(a, b)).toBe(true)
const c = {
name: 'a',
hash: '#hi',
query: { foo: 'bar', arr: [1, 2] }
}
expect(isSameRoute(a, b)).toBe(false)
expect(isSameRoute(a, c)).toBe(true)
})

it('nested query', () => {
@@ -44,7 +56,12 @@ describe('Route utils', () => {
path: '/abc',
query: { arr: [1, 2], foo: { bar: 'not bar' }}
}
expect(isSameRoute(a, b)).toBe(true)
const d = {
path: '/abc',
query: { foo: { bar: 'bar' }, arr: [1, 2] }
}
expect(isSameRoute(a, b)).toBe(false)
expect(isSameRoute(a, d)).toBe(true)
expect(isSameRoute(a, c)).toBe(false)
})

@@ -150,4 +167,24 @@ describe('Route utils', () => {
expect(isIncludedRoute(d, f)).toBe(false)
})
})

describe('createPlainRoute', () => {
it('path', () => {
const a = { path: '/a?arr=1&foo=bar&arr=2#hi' }
const b = { path: '/a?arr=1&arr=2&foo=bar#hi' }
const c = { path: '/a?foo=bar&arr=1&arr=2#hi' }
const route = {
path: '/a',
hash: '#hi',
query: { foo: 'bar', arr: [1, 2] }
}
const aRoute = createPlainRoute(a)
const bRoute = createPlainRoute(b)
const cRoute = createPlainRoute(c)
expect(isSameRoute(aRoute, route)).toBe(false)
expect(isSameRoute(bRoute, route)).toBe(false)
expect(isSameRoute(bRoute, route)).toBe(false)
expect(isSameRoute(cRoute, route)).toBe(true)
})
})
})