vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.91k stars 1.19k forks source link

Internal exception when using a numeric hash #2006

Closed MosheL closed 1 year ago

MosheL commented 1 year ago

Reproduction

History mode router, with a numeric hash

Steps to reproduce the bug

navigate to any page with a router with numeric hash in the URL.

Expected behavior

The page will navigate to a div with the numeric id, or if it did not exists it will ignore it.

Actual behavior

Internal exception, ignored with a try catch.

Additional information


function scrollToPosition(position) {
  let scrollToOptions;
  if ("el" in position) {
    const positionEl = position.el;
    const isIdSelector = typeof positionEl === "string" && positionEl.startsWith("#");
    if (typeof position.el === "string") {
      if (!isIdSelector || !document.getElementById(position.el.slice(1))) {
        try {
     >>>>>>>      const foundEl = document.querySelector(position.el);
          if (isIdSelector && foundEl) {
            warn(`The selector "${position.el}" should be passed as "el: document.querySelector('${position.el}')" because it starts with "#".`);
            return;
          }
        } catch (err) {

There is a simple solution to it so It can fixable use document.getElementById(position.el.substring(1)). It works with numbers.

posva commented 1 year ago

That's what the warning is telling you to do:

should be passed as "el: document.querySelector('${position.el}')"

Normally, it takes into account this scenarios. You can find the whole explanation in the source file, I think you checked it. The problem could be something else but you didn't provide a reproduction. BTW, you can ask questions (without a reproduction) in the discussions