app.js scores an uncaught exception if initial URL contains a hash with a name that is not a valid selector name

[yacoob]

Description

I'm migrating a page to gridsome. That page is using #p/123 hashes in the url as an indicator of gallery position. Default gridsome's router config contains code that causes a DOMException to be raised if you put a hash containing a slash (like #p/123) in the URL.

Steps to reproduce

1. run yarn gridsome create bla && cd bla && yarn gridsome develop
2. visit http://localhost:8080/#p/123

Expected result

Default main page loads without an error.

Actual result

Default main page loads, but the vue initialisation is interrupted. Console show the following:

21:42:49.691 [Vue warn]: Error in nextTick: "SyntaxError: Document.querySelector: '#p/123' is not a valid selector"

(found in <Root>) vue.runtime.esm.js:619

21:42:49.692 DOMException: Document.querySelector: '#p/123' is not a valid selector vue.runtime.esm.js:1897

As far as I can tell, this is a result of the default scrollBehavior handler not sanity checking location's hash, and using it as is in the resulting route. Then vue-router tries to use #p/123 as a selector in querySelector, throws an exception which is uncaught and leaves the page with uninitialised router - and probably some other unfinished business. At least the page loads :)

Environment

System:
OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
Binaries:
Node: 16.3.0 - /tmp/yarn--1625950000599-0.1658859243358577/node
Yarn: 1.22.5 - /tmp/yarn--1625950000599-0.1658859243358577/yarn
npm: 7.15.1 - /usr/local/bin/npm
npmPackages:
gridsome: ^0.7.0 => 0.7.23

Note

I'm not really a JS developer, so I don't have an idea how to solve it "properly" without enshrining an assumption of what vue-router does under the hood. It looks like it might also have been fixed in vue-router 4.