Last active
March 20, 2020 11:14
-
-
Save tbl0605/a6af0b3208057ee6cf4fa4cac8c5e71e to your computer and use it in GitHub Desktop.
Bug using vue-router, Edge and a file hosted on a local windows filesystem WITH WORKAROUND (see vue-router issue 2774)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Additional comment for Issue 2774 (with workaround)</title> | |
<meta charset="utf-8" /> | |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js"></script> | |
</head> | |
<body> | |
<h1> | |
<a href="https://github.com/vuejs/vue-router/pull/2774" | |
>Additional comment for Issue 2774 (with workaround)</a | |
> | |
</h1> | |
<h2>Instructions</h2> | |
<ol> | |
<li>Load file up using methods described below</li> | |
</ol> | |
<h2>Test case</h2> | |
<ul> | |
<li> | |
Host file on a windows filesystem, e.g. 'file:///C:/2774_example2.html', | |
and open it using Edge, you'll see that the URL shown by Edge will | |
<b>correctly</b> be 'file:///C:/2774_example2.html' | |
</li> | |
</ul> | |
<div id="app">Vue failed to load</div> | |
<script type="text/javascript"> | |
function detectIE() { | |
if (!window || !window.navigator || !window.navigator.userAgent) { | |
return false; | |
} | |
var ua = window.navigator.userAgent; | |
var msie = ua.indexOf('MSIE '); | |
if (msie > 0) { | |
// IE 10 or older => return version number | |
return true; | |
} | |
var trident = ua.indexOf('Trident/'); | |
if (trident > 0) { | |
// IE 11 => return version number | |
return true; | |
} | |
var edge = ua.indexOf('Edge/'); | |
if (edge > 0) { | |
// Edge (IE 12+) => return version number | |
return true; | |
} | |
// other browser | |
return false; | |
} | |
if (detectIE()) { | |
let oldReplaceState = window.history.replaceState; | |
window.history.replaceState = function(...args) { | |
let matches, | |
newArgs = [...args]; | |
if ( | |
newArgs.length >= 3 && | |
newArgs[2] && | |
// URLs like '/C:/my/path/to/2774_example.html' will be rewritten as 'my/path/to/2774_example.html' | |
(matches = /^\/[A-Z]:(\/.*)$/gi.exec(newArgs[2].toString())) && | |
matches.length == 2 | |
) { | |
newArgs[2] = matches[1]; | |
} | |
return oldReplaceState.apply(this, newArgs); | |
}; | |
} | |
const First = { template: '<div>First route content</div>' }; | |
const Second = { template: '<div>Second route content</div>' }; | |
const router = new VueRouter({ | |
routes: [ | |
{ path: '/', name: 'root', redirect: { name: 'first' } }, | |
{ path: '/first', name: 'first', component: First }, | |
{ path: '/second', name: 'second', component: Second } | |
], | |
base: '.', | |
mode: 'hash', | |
scrollBehavior(to, from, savedPosition) { | |
if (to.hash && process.env.VUE_APP_ROUTE_MODE !== 'hash') { | |
return { selector: to.hash }; | |
} | |
if (savedPosition) { | |
return savedPosition; | |
} | |
} | |
}); | |
Vue.use(VueRouter); | |
new Vue({ | |
template: ` | |
<div> | |
<router-link to="/first">First route works correctly</router-link> | |
<router-link to="/second">Second route works correctly</router-link> | |
<a href @click.prevent="reload()">Reloading this page under Edge will work</a> | |
<router-view></router-view> | |
</div>`, | |
methods: { | |
reload: function() { | |
window.location.reload(true); | |
} | |
}, | |
router: router | |
}).$mount('#app'); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment