Regular links not working in IE11

Version

3.0.1 (tested with vuejs 2.5.9)

Reproduction link

https://jsfiddle.net/6b7k58wh/

Steps to reproduce

• Use Internet Explorer 11 (Tested with version 11.1176.10586.0 update version 1.0.47)
• Navigate with a router link to a page that contains a regular link ("<a href..." )
• Click on the regular link

What is expected?

That i am navigated to the correct page. This is working correctly in chrome and firefox.

What is actually happening?

The URL is changing but the page content stays the same. (see video on Youtube)

---

This was working up to vue-router 2.7.0 (with vuejs 2.4.2).

I tested with chrome and ie11:
https://www.youtube.com/watch?v=2E8uKJbrCSM

[posva]

You have to use router-link to navigate within the app

From the documentation i know that the preferred way would be using router-link instead of regular links: https://router.vuejs.org/en/api/router-link.html

But regular links were working up to vue-router 2.7.0. Was there a breaking change recently?

We have a special case where our links are created dynamically by setting the html to a div with the v-html attribute. I made a quick test and router-links are not working there. Do you have an idea how to workaround that?

Thanks in advance!

[posva]

The PR that added this behaviour is at #1662.
I'm not sure if this is something we want to fix but it bothers me that it was working before and it isn't now...

[jblotus]

Having similar issues in IE11 and had to rollback to 2.7.0

[jblotus]

In our case we have a menu fragment on the page that is not in Vue and just uses regular anchor tags which will trigger navigation change. Would be great to keep this especially for legacy applications where Vue apps are embedded partially in a page.

This works in chrome and firefox of course.

[jblotus]

maybe dupe of #1849

[chrisbethelepb]

Here's a workaround that worked for me:

• Add this to your Vue app that implements the router:

      methods: {
        hashChangeHandler: function() {
          var target = window.location.hash;
          this.$router.push(target.substring(1, target.length));
        }
      },
      mounted: function() {
        // fix for IE 11
        if (!!window.MSInputMethodContext && !!document.documentMode) {
          window.addEventListener('hashchange', this.hashChangeHandler);
        }
      },
      destroyed: function() {
        // fix for IE 11
        if (!!window.MSInputMethodContext && !!document.documentMode) {
          window.removeEventListener('hashchange', this.hashChangeHandler);
        }
      }

!!window.MSInputMethodContext && !!document.documentMode is just a quick truthy check that only evaluates to true for IE 11.

Working demo: https://jsfiddle.net/5r5pmLqw/

[magentaFire]

I solved it with babel: installing presets (stage-0, stage-1, stage-2, stage-3, env and es2015)
Here is how to install presets:
babel preset env
and adding them to my .babelrc:
{ "presets": ["env", "stage-0" "stage-1", "stage-2", "stage-3" , "es2015"] }