Better error message when the scrollBehavior selector is invalid

What problem does this feature solve?

Currently if you pass a hash id with unescaped CSS special characters /[!"#$%&'()*+,\-./:;<=>?@[\\]^{|}~]/ to a scrollBehavior selector, execution will fail:

'XXX' is not a valid selector

Because of this url-styled hashes (e.g. "#one/two" or "#main/secondary"), both valid ids in HTML5, cannot be passed directly from the to.hash or from.hash parameters. This is because behind the scenes document.querySelector, which relies on CSS character compliance, is used in all but a very small number of circumstances (i.e. /^#\d/). This feature proposes broadening the use case for document.getElementById to all selectors that have the appearance of an id, specifically ungrouped selectors starting with a hash (i.e. /^#[^, ]+$/)

What does the proposed API look like?

API doesn’t change, except the following would work:

scrollBehavior(to, from, savedPosition) {
  return {
    selector: to.hash,
  }
}
// where:
window.location = '/one/two#three/four';

[posva]

Glad to hear it makes more sense! The docs should indeed note that querySelector is used behind the scenes and that it doesn’t always work.

to be clear it would be el: document.getElementById(to.hash.slice(1)), but that would work without escaping the hash!

Another possibility would be to always use an document.getElementById if el.startsWith('#') and write a specific warning if no element is found that shows that getElementById is used when el starts with # as well as pointing out that we can use el: document.querySelector(to.hash) (which is less boilerplate than the one with slice). I think this option makes the most sense in the end because it will still allow to just do el: to.hash, will work in most scenarios without the user needing to escape the CSS selector and will still warn when failing providing a way to make it work no matter what.

I will write an RFC for this, it’s worth one

[posva]

Vue Router doesn’t replicate the hash scrolling from the browser, we use scrollTo to scroll to the position passed by the user and provide selector for convenience.

Note the fragment of the url has multiple use cases, anchoring to an id of the page is the most common one but only one of them.

I think it would be better to deprecate selector and introduce a new el option. I updated the comment above, let me know what you think!