vue-router: IE11 adds undefined to url when defining a scrollBehaviour

Version

3.0.1

Reproduction link

Please read below, I wasn’t able to reproduce the error in a minimum fiddle. https://codepen.io/Nirazul/pen/dJxvZB?editors=1010

Steps to reproduce

Even after debugging a few hours, I wasn’t able to manage a reproduction and I’m unsure what that means. However I’ve probably found the issue and enough hints to why it’s occuring.

The problem is that IE11 is adding a /undefined to the url, when I’m initializing the router with a scrollBevariour method. The reason is the following line of code, which was implemented to fix #1585:

https://github.com/vuejs/vue-router/blob/dev/src/util/scroll.js#L11

There are similar issues in other projects, that have been closed: https://github.com/ampproject/amphtml/issues/743

I haven’t found an easy way to fix this except commenting out the line. So the easiest fix would be to test for IE and not execute the line at all.

What is expected?

IE should not add /undefined to the route when providing a scrollBehaviour function.

What is actually happening?

IE (under some arcane circumstances) adds /undefined to the URL, when vue-router’s setupScroll is executed.

As I said, I wasn’t able to reproduce it in a reduced Fiddle. When stepping through the code, I could identify the line that was causing it. I’m not sure however, if some kind of listener may be the cause.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 15 (4 by maintainers)

Most upvoted comments

Ok, so I’ve found the culprit. The issue is created by the GTM (Google Tag Manager) script. It replaces native history APIs in IE/Edge and introduces the bug.

There’s a report on a google forum: https://productforums.google.com/forum/#!topic/tag-manager/uG6FtPInRGs;context-place=forum/tag-manager

The author also mentions a fix:

// Fix issue with GTM overwriting replaceState, causing url changes in IE and Edge browsers.

function fixHistoryMethod(name) {
    var oldMethod = window.history[name];
    window.history[name] = function(state, title, url) {
        if (url === undefined) {
            oldMethod.apply(window.history, [state, title]);
        } else {
            oldMethod.apply(window.history, [state, title, url]);
        }
    }
}

fixHistoryMethod("replaceState");
fixHistoryMethod("pushState");

nirazul on Feb 8, 2018

Thanks for the detailed issue 😉 , always a pleasure! Cannot give it a look right now but will come back later to see if there’s something else or if it’s indeed just a matter of skipping that line on IE

posva on Jan 26, 2018