[DO NOT MERGE] [Bug Fix] navigation dropdown bold issue(SR-15313)

[Kyle-Ye]

Issue SR-15313

Summary

• Primary tutorial navigation dropdown fails to bold the current tutorial when browser URL is not lowercased (SR-15313)
  • The "isActive" from router-link will be false since it tricks "/about" and "/abouT" are not active. And it seems hard for us to change the override the compare logic behind router-link to a case-insensitive one.
  • So I use the same method in MobileDropdown.vue to check "currentOption === ⌥.title" as isActive condition

// vue-router version 3.5.3 /src/components/link.js line 79
classes[exactActiveClass] = isSameRoute(current, compareTarget, this.exactPath)
classes[activeClass] = this.exact || this.exactPath
  ? classes[exactActiveClass]
  : isIncludedRoute(current, compareTarget)

// vue-router version 3.5.3 /src/utils/route.js line 119
export function isIncludedRoute (current: Route, target: Route): boolean {
  return (
    current.path.replace(trailingSlashRE, '/').indexOf(
      target.path.replace(trailingSlashRE, '/')
    ) === 0 &&
    (!target.hash || current.hash === target.hash) &&
    queryIncludes(current.query, target.query)
  )
}

• Mobile tutorial navigation dropdown fails to list its child when browser URL is not lowercased
  • Change the if check to tutorialUrl === $route.path.toLowerCase() to make sure the condition is true when navigating to an UPPER-CASE or Mix-case one.

Testing

Navigating to: http://localhost:8000/tutorials/slothcreator/CREATING-CUSTOM-SLOTHS in the attached documentation catalog.(See the SR-15313's attachment) in normal mode and mobile mode(width less than some value will enter this mode) respectively.

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

• Ran npm test, and it succeeded
  [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"

[dobromir-hristov]

Hello there. Thank you for your contribution.

The fix you are proposing should work, but I think it would be better if we can address this at the source, and just open a PR on VueRouter to fix their comparison - https://github.com/vuejs/vue-router/blob/084e7785f3eb9364d3a0c26ab68358f6cf142e21/src/util/route.js#L119?

It looks straight forward, but there might be things I am overlooking. Vue Router already supports case-insensitive matching for routes themselves, so it should be good to fix route matching as well.

[Kyle-Ye]

Hello there. Thank you for your contribution.

The fix you are proposing should work, but I think it would be better if we can address this at the source, and just open a PR on VueRouter to fix their comparison - vuejs/vue-router@084e778/src/util/route.js#L119?

It looks straight forward, but there might be things I am overlooking. Vue Router already supports case-insensitive matching for routes themselves, so it should be good to fix route matching as well.

Open a issue on vuejs/vue-router#3656
Pull Request on vuejs/vue-router#3657